如何在 JavaScript 中模拟 target="_blank"答案

【问题标题】：How to simulate target="_blank" in JavaScript如何在 JavaScript 中模拟 target="_blank"
【发布时间】：2009-10-15 17:51:06
【问题描述】：

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

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>

【问题讨论】：

嗯？ target="_top" 不会在新窗口中打开 - target="_blank" 会。
如果链接已经在新窗口中打开（由于 target="_blank"）并且 javascript 点击处理程序已经在更新您的数据库，为什么您需要使用 Javascript 打开新窗口全部？

标签： javascript

【解决方案1】：

<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

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

【讨论】：

window.open 和target="_blank" 一样 - 它在新窗口中打开 URL。
是的。 window.open() 的第二个参数是您要为窗口指定的“名称”，类似于在链接上设置目标。 developer.mozilla.org/En/DOM:window.open
哦，我明白了。 window.open 被 Firefox 弹出窗口阻止程序阻止，但 target="_blank" 不是。我应该只要求客户从他们自己的网站启用弹出窗口吗？
是否有 JavaScript 解决方案不会被 Firefox 等弹出窗口阻止程序阻止？
@MattDiPasquale 阻止 window.open 有点像弹出窗口阻止程序！如果您拨打电话是为了响应点击操作，它更有可能不被阻止。

【解决方案2】：

这可能会有所帮助

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 错误：对象的无效操作”
这个答案可以通过添加一些正在发生的事情的描述来改进

【解决方案3】：

我知道这是一个已经完成并整理好的交易，但这是我用来解决我的应用程序中的问题的方法。

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(event.target).attr("target", "_blank")

您可能需要重新设计它以适合您的确切用例，但这是我自己的痒痒的方法。

这里有一个demo 供你使用。

（jsfiddle 中的链接回到了这个讨论.. 不需要新标签:)）

【讨论】：

我更喜欢这个答案，因为它使用 jquery，并且避免了 window.open 弹出窗口阻止程序问题。在处理某些包含缺少目标的链接的第三方数据时，这是完全合法的。

【解决方案4】：

这就是我使用 jQuery 的方式。我为每个要在新窗口中打开的链接设置了一个类。

$(function(){

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

【讨论】：

【解决方案5】：

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

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

我开始使用它来绕过 W3C 的 XHTML 严格测试。

【讨论】：

我认为内联 JavaScript 比添加一个无处不在的“非标准”属性更混乱。
@MattiVirkkunen 在某些情况下这是唯一的解决方案
@Claudiu：如果你发现自己处于如此荒谬的境地，你宁愿解决问题，也不要纠结于它。

【解决方案6】：

你可以从a标签中提取href：

window.open(document.getElementById('redirect').href);

【讨论】：

【解决方案7】：

这可能会帮助您打开所有页面链接：

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

它将打开每个<a href="" class="myClass"></a> 链接项目到另一个选项卡，就像您单击每个选项卡一样。

您只需将其粘贴到浏览器控制台即可。 需要 jQuery 框架

【讨论】：

【解决方案8】：

这就是我在我的网站上的做法。 Severa 按钮调用一个 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>

【讨论】：