纯JS iframe 加载按钮

Question

我用按钮加载iframe，当我添加第二个按钮时它就无法工作。

HTML：

<div class="iframe_container"></div>
<a href="javascript:;" class="button" data-id="/test">Test</a>

脚本：

var button = document.querySelector(".button");
var iframeContainer = document.querySelector(".iframe_container");
    
button.addEventListener("click", function () {
  var dataId = button.getAttribute("data-id");
  if (dataId != null && dataId != undefined) {
    iframeContainer.innerHTML = "";
    iframeContainer.innerHTML =
      '<iframe src="' + dataId + '" title="" style="width:100%;"></iframe>';
   }
});

What i want to do=

<div class="iframe_container"></div>
<a href="javascript:;" class="button" data-id="/test">Test</a>
    
    
<div class="iframe_container"></div>
<a href="javascript:;" class="button" data-id="/foo">Test 2</a>

...但第二个按钮无法正常工作。

- awakening

---

文档中的ID必须是唯一的。 - Terry

我把它改成了类，但仍然不起作用。 - awakening

然后更新你的问题。 - Terry

Answer 1

document.querySelector 只能获取第一个匹配的 DOM 元素！你需要使用 querySelectorAll 并在所有具有该类的元素上进行循环，这样你就可以为每个元素添加监听器。

 var buttons = document.querySelectorAll(".button");
 var iframeContainers = document.querySelectorAll(".iframe_container");

    
    for (let i = 0; i < buttons.length; i++){
        buttons[i].addEventListener("click", function () {
            var dataId = buttons[i].getAttribute("data-id");
            if (dataId != null && dataId != undefined) {
                iframeContainers[i].innerHTML = "";
                 iframeContainers[i].innerHTML =
                    '<iframe src="' + dataId + '" title="" style="width:100%;"></iframe>';
            }
        });
    }

- Camille