向 Javascript Iframe 彈出窗口添加多個鏈接

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 。

嘗試以下方式：

 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>