Html 带有 target="_blank" 的链接不会在 Chrome 的新标签页中打开

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29444051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:46:43  来源:igfitidea点击:

link with target="_blank" does not open in new tab in Chrome

htmlhyperlink

提问by Steve

On this website, the top accordion navigation contains an element called "Foundation": (screenshot).

这个网站上,顶部的手风琴导航包含一个名为“Foundation”的元素:(截图)

This element is produced by HTML code:

此元素由 HTML 代码生成:

<a href="http://www.foracure.org.au" target="_blank" style="width: 105px;"></a>

However, in Chrome, when you click on this element, the new website does not open in a new tab.

但是,在 Chrome 中,当您单击此元素时,新网站不会在新选项卡中打开。

Can you please tell me why? Thank you.

你能告诉我为什么吗?谢谢你。

回答by Hyman

Because JavaScript is handling the click event. When you click, the following code is called:

因为 JavaScript 正在处理点击事件。单击时,将调用以下代码:

el.addEvent('click', function(e){
    if(obj.options.onOpen){
        new Event(e).stop();
        if(obj.options.open == i){
            obj.options.open = null;
            obj.options.onClose(this.href, i);
        }else{
            obj.options.open = i;
            obj.options.onOpen(this.href, i);
        }   
    }       
})

The onOpenmanually changes the location.

onOpen手动更改location

Edit: Regarding your comment... If you can modify ImageMenu.js, you could update the script which calls onCloseto pass the aelement object (this, rather than this.href)

编辑:关于您的评论...如果您可以修改 ImageMenu.js,您可以更新调用onClose传递a元素对象的脚本(this, 而不是this.href

obj.options.onClose(this, i);

Then update your ImageMenu instance, with the following onOpenchange:

然后更新您的 ImageMenu 实例,并进行以下onOpen更改:

window.addEvent('domready', function(){
    var myMenu = new ImageMenu($$('#imageMenu a'), {
        openWidth: 310,
        border: 2,
        onOpen: function(e, i) {
            if (e.target === '_blank') {
                window.open(e.href);    
            } else {
                location = e.href;
            }
        }
    });
});

This would check for the target property of the element to see if it's _blank, and then call window.open, if found.

这将检查元素的 target 属性以查看它是否为,如果找到_blank则调用window.open

If you'd prefer not to modify ImageMenu.js, another option would be to modify your links to identify them in your onOpenhandler. Say something like:

如果您不想修改 ImageMenu.js,另一种选择是修改您的链接以在onOpen处理程序中标识它们。像这样说:

<a href="http://www.foracure.org.au/#_b=1" target="_blank" style="width: 105px;"></a>

Then, update your onOpencall to:

然后,将您的onOpen电话更新为:

onOpen: function(e, i) {
    if (e.indexOf('_b=1') > -1) {
        window.open(e);   
    } else {
        location = e;
    }
}

The only downside to this is the user sees the hash on hover.

唯一的缺点是用户会在悬停时看到散列。

Finally, if the number of links that you plan to open in a new window are low, you could create a map and check against that. Something like:

最后,如果您计划在新窗口中打开的链接数量很少,您可以创建一个地图并进行检查。就像是:

var linksThatOpenInANewWindow = {
    'http://www.foracure.org.au': 1
};

onOpen: function(e, i) {
    if (linksThatOpenInANewWindow[e] === 1) {
        window.open(e);   
    } else {
        location = e
    }
}

Only downside is maintenance, depending on number of links....

唯一的缺点是维护,取决于链接的数量....

Others have suggested modifying the link (using #or javascript:) and adding an inline event handler (onclick) - I don't recommend that at all as it breaks links when JS is disabled/not supported.

其他人建议修改链接(使用#javascript:)并添加内联事件处理程序(onclick) - 我根本不建议这样做,因为当 JS 被禁用/不支持时它会破坏链接。

Good luck!

祝你好运!

回答by Anurag

Replace 

<a href="http://www.foracure.org.au" target="_blank"></a>    

with 

<a href="#" onclick='window.open("http://www.foracure.org.au");return false;'></a>

in your code and will work in Chrome and other browsers.

在您的代码中,并将在 Chrome 和其他浏览器中工作。

Thanks Anurag

谢谢阿努拉格

回答by Tony

For Some reason it is not working so we can do this by another way

由于某种原因它不起作用所以我们可以通过另一种方式做到这一点

just remove the line and add this :-

只需删除该行并添加以下内容:-

<a onclick="window.open ('http://www.foracure.org.au', ''); return false" href="javascript:void(0);"></a>

Good luck.

祝你好运。

回答by TorvaldsDB

Learn from another guy:

向另一个人学习:

<a onclick="window.open(this.href,'_blank');return false;" href="http://www.foracure.org.au">Some Other Site</a>

It makes sense to me.

对于我,这说得通。

回答by bhavesh vala

Your syntax for the target attribute is correct, but browsers need not honor it. They may interpret it as opening the destination in a new tab rather than new window, or they may completely ignore the attribute. Browsers have settings for such issues. Moreover, opening of new windows may be prevented by browser plugins (typically designed to prevent annoying advertisements).

你的 target 属性的语法是正确的,但浏览器不需要遵守它。他们可能会将其解释为在新选项卡而不是新窗口中打开目的地,或者他们可能完全忽略该属性。浏览器有针对此类问题的设置。此外,浏览器插件可能会阻止打开新窗口(通常旨在防止烦人的广告)。

There's little you can do about this as an author. You might consider opening a new window with JavaScript instead, cf. to the accepted answer to target="_blank" is not working in firefox?, but browsers may be even more reluctant to let pages open new windows that way than via target.

作为作者,您对此无能为力。您可以考虑使用 JavaScript 打开一个新窗口,参见。对 target="_blank" 的公认答案在 firefox 中不起作用?,但浏览器可能更不愿意让页面以这种方式打开新窗口,而不是通过目标。

target="_blank" is not working in firefox?

target="_blank" 在 Firefox 中不起作用?

回答by Vishnu

most simple answer just put the target="_blank" in front of href

最简单的答案就是将 target="_blank" 放在 href 前面

<a target="_blank" href="http://www.foracure.org.au" style="width: 105px;"></a>

it will work

它会工作

回答by PhilipT

If you use React this should work:

如果您使用 React,这应该可以工作:

<a href="#" onClick={()=>window.open("https://...")}</a>