如何在JavaScript中模拟target =“ _ blank”


156

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

<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完全打开新窗口?
乔尔·穆勒

Answers:


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

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


2
window.open会做什么target="_blank"-它会在新窗口中打开URL。
ceejayoz

3
是。window.open()的第二个参数是您要赋予窗口的“名称”,类似于在链接上设置目标。 developer.mozilla.org/En/DOM:window.open
Omer Bokhari,2009年

2
哦,我明白了。window.open被Firefox弹出窗口阻止程序阻止,但target =“ _ blank”未被阻止。我是否应该要求客户从自己的网站启用弹出窗口?
菲利普·森

7
是否有一个JavaScript解决方案不会像Firefox那样受到弹出窗口阻止程序的阻止?
ma11hew28 2010年

4
@MattDiPasquale阻止window.open有点像弹出窗口阻止程序!如果您响应单击操作而拨打电话,则它更有可能不会被阻止。
威廉·丹尼斯

19

这可能有帮助

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 2016年

8
可以通过添加一些正在发生的情况来改进此答案
Elly Post

13

我知道这是完成的工作,但是这是我用来解决应用程序中问题的方法。

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")

您可能需要对其进行修改以适合您的确切用例,但是这就是我挠痒痒的方法。

这是一个演示,供您操作。

(jsfiddle中的链接返回到此讨论..不需要新选项卡:))


1
我优先选择此答案,因为它使用jquery,并且避免了window.open弹出窗口阻止程序问题。当处理某些第三方数据包含缺少目标的链接时,这是完全合法的。
IncredibleHat

7

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

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

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


1
我认为内联JavaScript比添加在任何地方都可以使用的“非标准”属性更为混乱。
Matti Virkkunen

@MattiVirkkunen在某些情况下是唯一的解决方案
Claudiu Creanga

1
@Claudiu:如果您发现自己处于这种荒谬的境地,那么宁愿解决问题的原因,也不愿纠缠于此。
Matti Virkkunen 2015年

5

这就是我使用jQuery的方式。对于每个要在新窗口中打开的链接,我都有一个类。

$(function(){

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

2

您可以从a标签提取href:

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

1

这可以帮助您打开所有页面链接

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

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.