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

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

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

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


当前回答

或者您可以创建一个链接元素并单击它。。。

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

这不应该被任何弹出窗口阻止程序阻止。。。有希望地

其他回答

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

这是一个技巧,

function openInNewTab(url) {
  window.open(url, '_blank').focus();
}

// Or just
window.open(url, '_blank').focus();

在大多数情况下,这应该直接发生在链接的onclick处理程序中,以防止弹出窗口阻止程序和默认的“新窗口”行为。您可以这样做,或者向DOM对象添加事件侦听器。

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

参考:使用JavaScript在新选项卡中打开URL

这将创建一个虚拟的a元素,并为其提供target=“_blank”,因此它将在一个新选项卡中打开,为其提供适当的URL href,然后单击它。

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    rel: 'noopener noreferrer',
    href: href,
  }).click();
}

然后你可以像这样使用它:

openInNewTab("https://google.com");

重要说明:

这必须在所谓的“可信事件”回调过程中调用,例如,在单击事件期间(在回调函数中不需要直接调用,但在单击操作期间)。否则,浏览器将阻止打开新页面。

如果您在某个随机时刻手动调用它(例如,在一段时间内或在服务器响应之后),它可能会被浏览器阻止(这很有道理,因为这会带来安全风险,并可能导致用户体验不佳)。

这对我有效。只需阻止事件,将URL添加到<a>标记,然后在该标记上触发单击事件。

JavaScript

$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href', "http://someurl.com");
        $(this).trigger('click');
});

HTML

<a href="#" class="myBtn" target="_blank">Go</a>

如果链接位于同一域(同一网站),浏览器将始终在新选项卡中打开该链接。如果链接在其他域上,它将在新的选项卡/窗口中打开,具体取决于浏览器设置。

因此,根据这一点,我们可以使用:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

并添加一些jQuery代码:

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

所以,首先用_blank target在同一个网站上打开新窗口(它将在新选项卡中打开),然后在新窗口中打开您想要的网站。