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

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

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

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


当前回答

是否在新选项卡或新窗口中打开URL,实际上由用户的浏览器首选项控制。无法在JavaScript中覆盖它。

window.open()的行为取决于它的使用方式。如果它是作为用户操作的直接结果调用的,让我们假设单击一个按钮,它应该可以正常工作并打开一个新的选项卡(或窗口):

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

但是,如果您尝试从AJAX请求回调打开新选项卡,浏览器将阻止它,因为它不是直接的用户操作。

要绕过弹出窗口阻止程序并从回调中打开新选项卡,这里有一个小技巧:

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});

其他回答

如果您只想打开外部链接(指向其他站点的链接),那么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');
        }
    });
});

只要省略strWindowFeatures参数,就会打开一个新选项卡,除非浏览器设置覆盖它(浏览器设置胜过JavaScript)。

新建窗口

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

新建选项卡

var myWin = window.open(strUrl, strWindowName);

--或--

var myWin = window.open(strUrl);

作者无法选择在新选项卡而不是新窗口中打开;这是用户偏好。(请注意,大多数浏览器中的默认用户首选项是针对新选项卡的,因此在未更改该首选项的浏览器上进行的简单测试不会证明这一点。)

CSS3提出了新的目标,但该规范被放弃。

反之则不然;通过在window.open()的第三个参数中为窗口指定某些窗口特性,当首选项是选项卡时,可以触发一个新窗口。

下面是一个如何将其放入HTML标记的示例

<button onClick="window.open('https://stackoverflow.com/','_blank')">Stackoverflow</button>

浏览器在处理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文档。