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

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

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

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


当前回答

如果您使用window.open(url,'_blank'),它将在Chrome上被阻止(弹出窗口阻止程序)。

试试看:

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

使用纯JavaScript,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};

其他回答

这将创建一个虚拟的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");

重要说明:

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

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

这是一个技巧,

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').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();

我使用了以下方法,效果很好!

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

jQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JavaScript

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();