Window.open 在选项中包含 noopener 时忽略高度和宽度

Question

我一直在尝试通过 window.open 函数指定弹出窗口 window 的宽度和高度。但是，只要我在选项中包含 noopener，宽度和高度就会在 Chrome 上被忽略。

这是我使用的代码，https://jsfiddle.net/v0otu1kq/ 在这种情况下，window 以指定尺寸打开。

但是，一旦我在选项中包含 noopener，例如https://jsfiddle.net/1eqtLsnr/ 它忽略维度集。

document.querySelector('[data-frame]').addEventListener('click', function(e) {
  e.preventDefault();
  window.open(
    'https://facebook.com',
    'facebook-window',
    'width=600,height=400,scrollbar=yes,noopener' // <-- this
  );
});

Answer 1

我深入研究了window.open函数的文档，终于找到了解决方法：

let fbWindow = window.open(
    '',
    'facebook-window',
    'width=600,height=400,scrollbar=yes'
);

fbWindow.opener = null;
fbWindow.location = 'https://facebook.com';

工作原理如下：

我们创建一个具有所需属性和空白的弹出窗口 window URL
以编程方式，我们将创建的弹出窗口 window 的属性 opener 更改为 null
一切都完成后，我们将 window 的位置更改为所需的位置（如果我们之前这样做，我们会遇到跨域错误）

PS：请注意，这不适用于 JSFiddle，因为它是沙盒化的。

Window.open 在选项中包含 noopener 时忽略高度和宽度

Window.open ignoring height and width when noopener is included in the option

javascript

html

window.open