javascript - window.onload 事件在 window.onload 生成的 <script> 中不起作用

Question

这个问题已经有答案了:

How to know if window "load" event was fired already (6 个回答)

已关闭 3 年前。

我正在动态创建并附加一个新的 <script>窗口加载后到 DOM:

const loadDynamicScript = () => {

  const dynamicScript = document.createElement('script');
  dynamicScript.src = '/my-dynamic-script.js';
  document.body.appendChild(dynamicScript);
}

window.addEventListener('load', loadDynamicScript);

N.B. I have tried window.addEventListener('DOMContentLoaded', loadDynamicScript); but this means /my-dynamic-script.js loads too soon.

没想到，任意window.onload my-dynamic-script.js 中的事件监听器现在不起作用。

我猜测这是因为事件监听器监听 window 的单个特定时刻。加载，此后的任何时间都为时已晚。 (这与我的预期不同 - 一旦窗口加载，窗口将处于始终积极触发 window.onload 事件监听器的状态)。

所以，里面 my-dynamic-script.js ...我可以用什么来代替:

window.addEventListener('load', activateMyFunction);

我已经尝试过:

• self.addEventListener('load', activateMyFunction);
• window.addEventListener('DOMContentLoaded', activateMyFunction);
• window.addEventListener('pageshow', activateMyFunction);
• document.body.addEventListener("pageshow", myFunction);

到目前为止还没有运气。我显然需要更有创造力。

<小时/>

一个有效的解决方案是简单地从事件监听器中删除函数调用并在不进行修饰的情况下声明它:

myFunction();

但这并不理想。我真的更喜欢在某种事件监听器(或类似的)中调用任何函数。

Answer 1

正如 @declan-mckelvey-hembree 建议再次在窗口对象上手动调度 load 事件。

向 script 标记添加事件监听器以了解文件何时加载。当它使用 window.dispatchEvent 在 window 上手动触发 load 时。

请务必将 {once: true} 添加为调用 loadDynamicScript 函数的 load 事件监听器的第三个参数。否则，当您分派(dispatch) load 事件时，该函数也会被调用。

const loadDynamicScript = () => {
  const dynamicScript = document.createElement('script');

  // Wait for script to load.
  script.addEventListener('load', () => { 

    // Dispatch 'load' event from window to trigger 'load' event
    // listeners in '/my-dynamic-script.js' file.
    const loadEvent = new Event('load');
    window.dispatchEvent(loadEvent); 
  }

  dynamicScript.src = '/my-dynamic-script.js';
  document.body.appendChild(dynamicScript);
}

// Adding {once: true} prevents loadDynamicScript from firing again on load.
// Otherwise the scripts would be added infinitely.
window.addEventListener('load', loadDynamicScript, {once: true);