带有'noopener'的Window.open打开一个新窗口而不是一个新选项卡

Question

我使用window.open('')with '_blank'作为第二个参数在新标签中打开我的链接例如.window.open('http://google.com', '_blank')

但是,最近我添加了第三个参数,'noopener'以便window.opener在新选项卡中变为空,并且新选项卡无法访问父选项卡/窗口.即window.opener是null

window.open('http://google.com', '_blank', 'noopener')

所以上面的代码解决了安全问题,但是没有打开一个新的选项卡,而是一个新的窗口开始打开,这不是我的预期.我的浏览器设置相同,未对其进行任何更改.

我可以做些什么来使这个代码打开新标签而不是新窗口？我不想删除noopener第三个参数

Answer 1

在一行中解决这个问题的另一种方法是直接访问opener属性并将其设置为null以利用window.open()返回Window对象的事实.这将适用于所有浏览器以打开带有null的新选项卡window.opener.

window.open(url, '_blank').opener = null;

Answer 2

老实说，我认为您的代码很好，但是您可以尝试其他实现：

var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";
yourWindow.target = "_blank";

Answer 3

https://mathiasbynens.github.io/rel-noopener/

const anchor = document.createElement('a');

Object.assign(anchor, {
  target: '_blank',
  href: 'http://google.com',
  rel: 'noopener noreferrer'
})
.click()

这是一种感觉更干净的方法。它创建一个锚标记并单击它，我们必须使用此解决方法作为用户首选项。

Answer 4

对我来说，这是唯一可以跨浏览器（IE11、Chrome 66、FF 60、Safari 11.1）工作的东西

function openURL(url) {
  var link = document.createElement('a');
  link.target = "_blank";
  link.href = url;
  link.rel = "noopener noreferrer";
  document.body.appendChild(link); // you need to add it to the DOM to get FF working
  link.click();
  link.parentNode.removeChild(link); // link.remove(); doesn't work on IE11
};