Google Colaboratory输出单元格中window.addEventListener无法运行求助

我来帮你搞定这个问题！先给你拆解下背后的原因，再给你可行的解决办法：

问题根源 #

当你通过IPython.display.HTML注入脚本时，IPython的页面（比如Jupyter Notebook/Lab）在你运行这个代码单元格之前就已经完成了DOM加载——也就是说DOMContentLoaded事件早就触发过了。这时候你再绑定这个事件的回调函数，自然不会被执行，因为事件已经发生过了。

解决方法1：直接执行DOM操作（最简便） #

既然页面DOM已经完全可用，完全不需要等待DOMContentLoaded，直接运行你的代码即可，就像你第一个成功的例子那样：

from IPython.display import HTML
HTML('''
<script>
  // 直接执行DOM操作，无需等待事件
  document.body.appendChild(document.createTextNode('Hello from direct execution!'));
</script>
''')

解决方法2：兼容式检查（适合需要复用的代码） #

如果你的代码需要兼顾其他可能未加载完成的环境，可以先判断当前文档的加载状态，再决定是否直接执行回调：

from IPython.display import HTML
HTML('''
<script>
  function init() {
    document.body.appendChild(document.createTextNode('Hello from init function!'));
  }

  // 检查文档是否已加载完成
  if (document.readyState === "complete" || document.readyState === "interactive") {
    // 页面已就绪，直接执行初始化逻辑
    init();
  } else {
    // 仅在页面未加载完时绑定事件（IPython环境下这个分支基本不会触发）
    window.addEventListener('DOMContentLoaded', init);
  }
</script>
''')

补充说明 #

你第一个例子能成功，是因为它没有依赖任何页面加载事件，脚本注入后立即执行DOM操作，而此时IPython页面的DOM已经完全可以被操作了。而第二个例子的问题就出在绑定了一个已经触发过的事件，导致回调永远不会被调用。

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