如何在location.replace（URL更改）之后捕获窗口的加载事件

Question

所以我用window.open('https://example.com/foo')打开了一个窗口。 我在同一域中，需要侦听load事件。

加载事件触发第一个window.open但是当我使用window.replace('https://example.com/bar')更改网址时，我无法获得另一个事件

CodeSandbox

1. 打开浏览器控制台
2. 单击打开按钮（在控制台中查看日志）
3. 单击切换按钮（注意什么都不会记录）

完整的例子

let open = null;
document.getElementById('open-button').addEventListener('click', () => {
  open = window.open('https://523k29z484.codesandbox.io/pages/foo.html');
  open.addEventListener('load', () => console.log('this fires'));
});

document.getElementById('switch-button').addEventListener('click', () => {
  open.addEventListener('load', () => console.log('before change does not fire'));
  open.location.replace('https://523k29z484.codesandbox.io/pages/bar.html');
  open.addEventListener('load', () => console.log('after change does not fire'));
});

Answer 1

我通过仔细链接以下代码解决了这一问题。

open.location.replace('https://211vv50z30.codesandbox.io/pages/bar.html');

// old page unloaded
open.addEventListener('unload', () => {
  // we can only add the load event after one tick
  setTimeout(() => {
    open.addEventListener('load', () => console.log('gotcha'));
  }, 0);
});

location.replace->卸载-> setTimeout（一勾）->加载

CodeSandbox