JavaScript打开新浏览器窗口检测关闭事件失效问题

问题复现 #

需求为打开新浏览器窗口/标签页后，检测该窗口的关闭动作，触发父页面相关元素刷新。
初始打开窗口代码：

var win = window.open(url, '_blank', 'width=500,height=400');

初始尝试直接在打开窗口后绑定beforeunload/onbeforeunload事件，事件完全不触发，控制台无对应日志：

win.addEventListener('beforeunload', function(event) {
     console.log('closed');
     // 后续业务代码...
});

绑定unload事件虽可触发，但会在窗口打开时触发1次、窗口关闭时触发1次，不符合需求。
临时可用的轮询实现（非最优）：

var timer = setInterval(function() { 
    if(win.closed) {
        clearInterval(timer);
        console.log('closed');
    }
}, 1000);

问题根因 #

事件监听器绑定时机过早：onbeforeunload/beforeunload事件必须等新窗口加载完成后再绑定才能生效，window.open调用后新窗口尚未完成文档加载，此时绑定的事件监听器会被新页面的加载流程覆盖，无法正常触发。

最优实现 #

无需轮询，将关闭事件的绑定逻辑放到新窗口的load事件回调中，等待窗口加载完成后再执行绑定即可：

var win = window.open(url, '_blank', 'width=500,height=400');
win.addEventListener('load', function() {
    win.addEventListener('beforeunload', function() {
        console.log('closed');
        // 编写父页面元素刷新、业务状态更新等逻辑
    })
});

方案生效前提：新开窗口与父页面符合同源策略，跨域场景下受浏览器安全限制无法直接访问子窗口对象绑定事件，需使用win.closed属性做短周期轮询检测。

内容的提问来源于stack exchange，提问作者David