如何通过点击三个按钮控制对应iframe的宽度，实现三档尺寸切换

DevOps 小满

2026-10-12

三按钮控制对应iframe宽度实现说明

需求说明

每个iframe对应3个控制按钮，点击按钮时调整对应iframe的宽度，原仅支持2按钮的实现无法适配当前场景。

三按钮方案核心逻辑

原双按钮方案仅判断是否为第一个按钮，仅支持2种宽度切换，三按钮方案通过索引匹配实现多档位宽度映射，逻辑如下：

先按按钮排列顺序定义对应的宽度数组，三个按钮分别对应数组的三个索引值：
const widthLevels = ['90px', '60%', '100%']
其中索引0对应第一个Small按钮（小宽度）、索引1对应第二个Medium按钮（中宽度）、索引2对应第三个Big/Large按钮（大宽度）
点击按钮时，获取当前点击按钮在同级按钮中的位置索引，直接从宽度数组中取出对应档位的宽度值
找到按钮组对应的iframe，将宽度赋值给iframe的style.width属性

该方案扩展性极强，后续如果要加更多宽度档位，只需要在数组中加对应值、新增对应按钮即可，不需要修改逻辑代码。

完整适配代码

JavaScript代码（兼容你提供的两种HTML结构，包括按钮内嵌span的场景）

document.querySelector('.container').addEventListener('click', (e) => {
  // 兼容按钮内部嵌套span的场景：点击span时向上查找所属的button元素
  const targetBtn = e.target.closest('button');
  // 点击的不是按钮就直接返回不处理
  if (!targetBtn) return;

  // 定义三个按钮对应的宽度档位，顺序和按钮排列顺序完全对应
  const widthLevels = ['90px', '60%', '100%'];
  // 把按钮父元素的所有子元素转成数组，获取当前点击按钮的索引
  const btnIndex = [...targetBtn.parentElement.children].indexOf(targetBtn);
  // 查找当前按钮组对应的iframe，兼容两种HTML结构
  const relativeIframe = targetBtn.closest('div:has(+ iframe)').querySelector('+ iframe');

  // 给对应iframe赋值宽度
  relativeIframe.style.width = widthLevels[btnIndex];
});