PureJS点击按钮加载iframe时新增第二按钮失效问题咨询

问题原因 #

• 原有代码使用document.querySelector(".button")仅会获取页面中第一个匹配class的按钮，第二个按钮没有绑定点击事件
• 原有代码仅提前获取了第一个iframe容器，无法实现按钮和对应容器的匹配绑定
• 点击事件中直接引用外部的button变量，即使绑定多个按钮也只会读取最后一个按钮的属性值

修复后的代码 #

无需修改你现有HTML结构，直接替换原有JS代码即可：

// 获取页面所有按钮元素
const buttons = document.querySelectorAll(".button");

// 遍历每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener("click", function () {
    // 读取当前点击按钮的自定义属性
    const dataId = this.getAttribute("data-id");
    // 匹配当前按钮上方对应的iframe容器（和你现有HTML结构完全适配）
    const iframeContainer = this.previousElementSibling;
    
    if (dataId) {
      iframeContainer.innerHTML = `<iframe src="${dataId}" title="" style="width:100%;"></iframe>`;
    }
  })
})

可选优化点 #

• 可以用this.dataset.id代替this.getAttribute("data-id")，是HTML5标准的自定义属性读取方式，写法更简洁
• 如果后续HTML结构可能变动，可给每个按钮新增data-target属性指定对应容器的ID，匹配逻辑会更稳定

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