Window.open 和 'noopener' 打开一个新的 window 而不是新标签

Question

我使用 window.open('') 和 '_blank' 作为第二个参数在新选项卡中打开我的 link 例如。 window.open('http://google.com', '_blank')

但是，最近我添加了第三个参数'noopener'，使得window.opener在新标签中变为null，新标签无法访问父tab/window。即 window.opener 是 null

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

所以上面的代码解决了安全问题，但不是打开一个新标签，而是一个新的 window 开始打开，这不是我所期望的。我的浏览器设置相同，没有进行任何更改。

有什么办法可以让这段代码打开新标签页而不是新标签页 window 吗？我不想删除 noopener 作为第三个参数

Answer 1

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 2

老实说，我认为你的代码很好，但你可以尝试不同的实现：

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

Answer 3

这是我唯一可以跨浏览器（IE11、Chrome66、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
};

Answer 4

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

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

Window.open 和 'noopener' 打开一个新的 window 而不是新标签

Window.open with 'noopener' opens a new window instead of a new tab

javascript

window.open

window.opener