我试图在一个新的选项卡中打开一个URL,而不是弹出窗口。

我见过一些相关的问题,其中的回答大致如下:

window.open(url,'_blank');
window.open(url);

但没有一个对我有效,浏览器仍然试图打开一个弹出窗口。


当前回答

如果您只想打开外部链接(指向其他站点的链接),那么JavaScript/jQuery的这一功能很好:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});

其他回答

浏览器在处理window.open时有不同的行为

您不能期望所有浏览器的行为都相同。window.open不能可靠地跨浏览器打开新选项卡上的弹出窗口,而且它还取决于用户的偏好。

例如,在Internet Explorer(11)上,用户可以选择在新窗口或新选项卡中打开弹出窗口,但不能强制Internet Explorer 11通过window.open以某种方式打开弹出窗口。

对于Firefox(29),window.open(url,'_blank')的行为取决于浏览器的选项卡首选项,尽管您仍然可以通过指定宽度和高度强制其在弹出窗口中打开url(请参阅下面的“Chrome”部分)。

Internet Explorer(11)

您可以将Internet Explorer设置为在新窗口中打开弹出窗口:

完成后,尝试运行window.open(url)和window.open(url,'_blank')。观察页面在新窗口中打开,而不是在新选项卡中打开。

Firefox(29)

您还可以设置选项卡首选项以打开新窗口,并看到相同的结果。

看起来Chrome(版本34)没有任何设置来选择在新窗口或新选项卡中打开弹出窗口。不过,在这个问题中讨论了一些方法(编辑注册表)。

在Chrome和Firefox中,即使用户将Firefox设置为在新选项卡中打开新窗口,指定宽度和高度也会强制弹出窗口(如这里的答案所述)

let url = 'https://stackoverflow.com'
window.open(url, '', 'width=400, height=400')

然而,在Internet Explorer 11中,如果在浏览器首选项中选择了选项卡,则相同的代码将始终在新选项卡中打开链接,指定宽度和高度不会强制弹出新窗口。

在Chrome中,当在onclick事件中使用window.open时,它似乎会打开一个新的选项卡,当在浏览器控制台中使用它时,它会打开新的窗口(正如其他人所指出的),当指定了宽度和高度时,弹出窗口会打开。


附加阅读:window.open文档。

这种方式与以前的解决方案类似,但实施方式不同:

.social_icon->CSS类

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>

 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });

不要使用target=“_blank”

始终为该窗口使用一个特定的名称,在我的情况下是指fulName。在这种情况下,可以节省处理器资源:

button.addEventListener('click', () => {
    window.open('https://google.com', 'meaningfulName')
})

这样,例如,当你在一个按钮上单击10次时,浏览器将始终在一个新选项卡中重新阅读它,而不是在10个不同的选项卡中打开它,这将消耗更多的资源。

您可以在MDN上阅读有关此的更多信息。

为了阐述史蒂文·斯皮尔伯格的答案,我在这样一个案例中这样做了:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

这样,就在浏览器跟随链接之前,我正在设置目标属性,因此它将在新的选项卡或窗口中打开链接(取决于用户的设置)。

jQuery中的一行示例:

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

这也可以通过使用本机浏览器DOM API来实现:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}