如何用JavaScript实现iframe高度调节滑块？含现有宽度调节代码

你只需要在现有基础上添加一个高度调节滑块，并在JS中分别处理两个滑块的事件即可，具体修改如下：

修改后的HTML代码 #

<iframe id="myIframe"></iframe>

<!-- 宽度调节滑块 -->
<input type="range" id="widthSlider" min="240" max="1024" value="240" style="width:100%">
<!-- 新增高度调节滑块 -->
<input type="range" id="heightSlider" min="200" max="800" value="200" style="width:100%; margin-top:10px;">

对应的JavaScript代码 #

// 获取元素
const iframe = document.querySelector('#myIframe');
const widthSlider = document.querySelector('#widthSlider');
const heightSlider = document.querySelector('#heightSlider');

// 监听宽度滑块变化
widthSlider.addEventListener('input', e => {
  iframe.style.width = `${e.target.value}px`;
});

// 监听高度滑块变化
heightSlider.addEventListener('input', e => {
  iframe.style.height = `${e.target.value}px`;
});

关键说明 #

• 给两个滑块分别添加唯一id（widthSlider和heightSlider），避免使用通用选择器导致元素选择混淆
• 高度滑块可以根据需求调整min、max和value的数值
• 用模板字符串${e.target.value}px拼接单位，写法更简洁直观

内容的提问来源于stack exchange，提问作者Diaa Sh