window.open新窗口addEventListener不触发load/DOMContentLoaded事件

需求是点击按钮打开新窗口并写入内容，已将按钮关联到switchToNewWindow方法，初始代码可正常运行，但添加load或DOMContentLoaded事件监听后，回调函数无法执行，而beforeunload事件能正常触发，询问其中原因。

初始可正常工作的代码：

windowOpen: false,

switchToNewWindow() {
  if (!this.windowOpen) {
    var win = window.open('', '_blank', 'location=no,titlebar=no,toolbar=no,top=200,left=350,width=1200,height=650');
    this.windowOpen = true;
    win.addEventListener('beforeunload', function() {
      this.windowOpen = false;
    }.bind(this));
  }
},

失效的监听代码：

win.addEventListener('load', function () {
    win.document.write("Hello, world!");
});

原因分析与解决办法 #

核心原因 #

1. load/DOMContentLoaded触发过早：当你用window.open('', '_blank')创建空白窗口时，这个空白页面的DOM加载完成速度极快，几乎是瞬间完成。等你调用addEventListener绑定事件的时候，load和DOMContentLoaded事件已经触发过了，所以回调函数不会被执行。

2. beforeunload能正常工作的逻辑：这个事件是在窗口即将关闭时才触发，属于窗口生命周期的后期事件。你添加监听时窗口还处于打开状态，后续窗口关闭时自然能捕获到这个事件。

解决方法 #

不需要依赖load事件，直接在创建窗口后立即写入内容即可——空白窗口的document对象是可以直接操作的：

windowOpen: false,

switchToNewWindow() {
  if (!this.windowOpen) {
    var win = window.open('', '_blank', 'location=no,titlebar=no,toolbar=no,top=200,left=350,width=1200,height=650');
    this.windowOpen = true;
    // 直接写入内容
    win.document.write("Hello, world!");
    // 必须调用close()结束写入，否则document可能一直处于加载状态
    win.document.close();
    
    win.addEventListener('beforeunload', function() {
      this.windowOpen = false;
    }.bind(this));
  }
},

如果坚持要通过事件监听实现，可以监听readystatechange事件检测文档状态，但这种方式完全没必要，直接写入是最简洁高效的方案。

内容的提问来源于stack exchange，提问作者Diana-P