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

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

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

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


当前回答

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

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

其他回答

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

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

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

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

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

$('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(a) {
    document.body.appendChild(a);
    a.setAttribute('href', location.href);
    a.dispatchEvent((function(e) {
        e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
        return e
    }(document.createEvent('MouseEvents'))))
}(document.createElement('a')))