Question

如何向该JavaScript添加多个链接，JavaScript是由外部链接触发的iframe弹出窗口，我需要添加3个链接来触发3个不同的页面弹出窗口。

我已经研究过JavaScript，并尝试了不同的方法。我搜索了堆栈，却发现没有任何东西可以提供解决方案。

任何帮助将不胜感激。

这是使用带有1个链接的JavaScript的HTML。

document.getElementById("link").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popupdarkbg").style.display = "block";
  document.getElementById("popup").style.display = "block";
  document.getElementById('popupiframe').src = "http://example.com";
  document.getElementById('popupdarkbg').onclick = function() {
    document.getElementById("popup").style.display = "none";
    document.getElementById("popupdarkbg").style.display = "none";
  };
  return false;
}

window.onkeydown = function(e) {
  if (e.keyCode == 27) {
    document.getElementById("popup").style.display = "none";
    document.getElementById("popupdarkbg").style.display = "none";
    e.preventDefault();
    return;
  }
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: transparent; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

<div id="main">
  <a href="" id="link">Click me</a><br>
</div>

<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

Answer 1

您可以使用class来引用多个元素。使用querySelectorAll()选择具有该类的所有元素，然后循环遍历这些元素以附加事件。

您可以使用自定义属性将 a 元素本身中的相关链接关联起来，然后单击即可检索并将其设置为弹出iframe src 。 / p>

尝试以下方式：

document.querySelectorAll('.link').forEach(function(lk){
  lk.onclick = function(e) {
    e.preventDefault();
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
    document.getElementById('popupiframe').src = this.getAttribute('data-link');
    console.log(this.getAttribute('data-link'));
    document.getElementById('popupdarkbg').onclick = function() {
      document.getElementById("popup").style.display = "none";
      document.getElementById("popupdarkbg").style.display = "none";
    };
    return false;
  }
});

window.onkeydown = function(e) {
  if (e.keyCode == 27) {
    document.getElementById("popup").style.display = "none";
    document.getElementById("popupdarkbg").style.display = "none";
    e.preventDefault();
    return;
  }
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: transparent; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

<div>
  <a href="" class="link" data-link="http://example.com">Click me</a><br>
  <a href="" class="link" data-link="http://example-2.com">Click me 2</a>
</div>

<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

将多个链接添加到Javascript Iframe弹出窗口

1 个答案: