Question

此线程提供了以下代码，用于在新标签页中打开网址：Programatically open the URL in new tab in chromium browser using javascript

<a href="some url" target="_newtab">content of the anchor</a>

我将有几个复选框连接到布尔状态变量。因此，单击一次按钮应在独立的选项卡中打开多个URL。在Javascript / React.js中有什么方法可以做到这一点？

Answer 1

首先，虽然target=_newTab可以工作，但是只能这样做，因为newTab对HTML毫无意义，因此您将获得默认操作，即将URL定位到新选项卡。但是，正确的做法是说target=_blank。

此外，作为补充，在定位新的空白窗口时，请确保将rel="noopener noreferrer"添加到a标签中，以防止 opening up a security hole 在您的网页中。

现在，要打开几个新标签，您必须使用JavaScript并多次调用 window.open() 。鉴于这不是锚元素的正常行为，我建议您使用其他元素（例如span）来使用户单击。

请注意，由于安全限制，以下代码在Stack Overflow代码段环境中无法在此处使用，但在其他页面中也可以使用。

document.querySelector(".multipleWindows").addEventListener("click", function(){
  window.open("https://cnn.com");
  window.open("https://hbo.com");
  window.open("https://cbs.com");  
});

.multipleWindows { color:blue; cursor:pointer; }

<span class="multipleWindows">Click to open several windows</span>

Answer 2

你是说

document.querySelector("#myLink").onclick=function(e) {
  document.querySelectorAll(".myCheck").forEach(function() {
    if (this.checked) window.open(this.getAttribute("data-href"),"_blank");
  }
}

具有

<a href="#" id="myLink">Click</a>
<input class="myCheck" type="checkbox" data-href="page1.html">Page 1<br/>
<input class="myCheck" type="checkbox" data-href="page2.html">Page 2<br/>
<input class="myCheck" type="checkbox" data-href="page3.html">Page 3<br/>

Answer 3

如何创建具有属性a的新DOM target="_blank"元素并触发点击？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id="button">Click me</button>
        <script type="text/javascript">
        var urls = ['https://google.com/', 'https://stackoverflow.com/'];

        var $button = document.getElementById("button");

        $button.addEventListener("click", function() {
            for(i in urls) {
                var url = urls[i];
                var $a = document.createElement("a");
                $a.setAttribute("href", url);
                $a.setAttribute("target", "_blank");
                $a.click();
            }
        });
        </script>
    </body>
</html>

Javascript：一键打开多个URL

3 个答案: