logo标签列表

如何在JavaScript中模拟target="_blank"？

javascript
191

当用户点击链接时，我需要更新数据库中的字段，然后在新窗口中打开请求的链接。 更新没有问题，但是我不知道如何在不要求他们点击另一个超链接的情况下打开一个新窗口。

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>
1
嗯？target="_top"不会在新窗口中打开 - target="_blank"会。 - Tomalak
如果链接已经在新窗口中打开（由于target="_blank"），并且javascript点击处理程序已经更新了您的数据库，为什么还需要使用Javascript打开新窗口呢？ - Joel Mueller
10个回答
380
<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

第二个参数是可选的，是目标窗口的名称。

3
window.open 的作用与 target="_blank" 相同 - 它会在新窗口中打开 URL。 - ceejayoz
3
是的，window.open() 的第二个参数是你想给新窗口设置的名称，类似于在链接中设置目标。 - Omer Bokhari
2
哦，我明白了。window.open被Firefox弹出窗口拦截器阻止了，但是target =“_blank”没有。 我应该让客户从他们自己的网站启用弹出窗口吗？ - Phillip Senn
7
有没有 JavaScript 解决方案可以不被 Firefox 等浏览器的弹窗拦截器阻挡？ - ma11hew28
6
阻止 window.open 行为是弹出窗口拦截器的主要作用！如果您在响应单击操作时进行调用，则它更有可能不被阻止。 - William Denniss
请记得添加 rel="noopener noreferrer" 以避免安全漏洞。 - David Soler
25

这可能有所帮助

var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    link.href = 'http://www.google.com';
    link.target = '_blank';
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': false,
        'cancelable': true
    });
    link.dispatchEvent(event);
IE11: "运行时Javascript错误：对象不是有效操作" - T-moty
9
这个答案可以通过添加一些描述来改善它，说明正在发生的事情。 - Elly Post
19

我知道这个问题已经解决了，但是这是我在我的应用程序中使用的方法来解决它。

if (!e.target.hasAttribute("target")) {
    e.preventDefault();     
    e.target.setAttribute("target", "_blank");
    e.target.click();
    return;
}

基本上这里发生的是，我会检查链接是否具有 target=_blank 属性。如果没有，它将停止链接的触发，设置它以在新窗口中打开，然后通过编程方式单击它。

您可以更进一步，跳过原始点击的停止（并使您的代码更加紧凑），方法如下：

if (!e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
}

如果你使用jQuery来封装添加跨浏览器属性的实现，那么你应该使用这个替代 e.target.setAttribute("target", "_blank"):

如果您使用jQuery来抽象添加跨浏览器属性的实现，则应使用以下内容而不是e.target.setAttribute（“target”，“_blank”）:
    jQuery(event.target).attr("target", "_blank")
你可能需要重新调整它以适应你的具体用例，但这就是我满足自己需求的方法。
这里有一个演示供你使用：demo。
（在jsfiddle中的链接会回到这个讨论...不需要新标签 ：））
1
我更喜欢这个答案，因为它使用了jQuery，并且避免了window.open弹出窗口阻止问题。当处理一些缺少目标的链接的第三方数据时，这是完全合法的。 - IncredibleHat
9

以下是我使用jQuery的方法。我为想要在新窗口中打开的每个链接创建一个类。

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});
6

如果只是针对单个链接，我个人更喜欢使用以下代码。否则，最好使用类似代码创建一个函数。

onclick="this.target='_blank';"

我开始使用这种方法来绕过W3C的XHTML严格测试。
1
我认为内联JavaScript比添加一个在任何地方都有效的“非标准”属性更混乱。 - Matti Virkkunen
在某些情况下，这是唯一的解决方案。 - Claudiu Creanga
1
@Claudiu：如果你发现自己处于这样荒谬的情况中，你应该修复原因而不是将其绕过。 - Matti Virkkunen
2
您可以从a标签中提取href属性：
window.open(document.getElementById('redirect').href);
1
这是我在我的网站上的做法。多个按钮调用一个JavaScript函数，该函数始终为每个新网页打开一个新标签页。
<button type="button" onclick="newTab('http://google.com')">search</button>
<button type="button" onclick="newTab('http://amazon.com')">buy</button>
<button type="button" onclick="newTab('http://gmail.com')">read</button>
<script>
    function newTab(url) {
        window.open(url, '_blank');
    }
</script>
请不要将“按钮”用于链接。更多信息。 - undefined
0
这可能会帮助您打开所有页面链接：

$(".myClass").each(
     function(i,e){
        window.open(e, '_blank');
     }
);

它将会打开每一个类名为“myClass”的链接，并在新标签页中打开，就像你单击每个链接一样。
只需将其粘贴到浏览器控制台即可。需要jQuery框架。
0
当用户按住Shift键并且您希望以编程方式打开一个新标签页（而不是新窗口）时，解决方案是在其周围包裹一个超时函数。
这取决于您的浏览器设置，但默认情况下，Chrome浏览器对于“按住Shift键 + JavaScript的window.open()”组合存在问题。
someElement.addEventListener('click', (e) => {
    if (e.shiftKey) {
        // Shift down + window.open() requires a "timeout" wrapper
        // Else a "new window" opens instead of a new tab
        setTimeout(() => window.open(url, '_blank'))
    } else {
        // if shift is not down this will open a new tab
        window.open(url, '_blank')
    }
 }
-1

JS的变化（href='#' target='_blank'）

您的回答可以通过添加更多支持性信息来改进。请进行[编辑]以添加更多详细信息，例如引用或文档，以便他人可以确认您的答案是否正确。您可以在帮助中心中找到有关编写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接