window.onload 事件在 window.onload 生成的 <script> 中不起作用 [重复]

Question

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

const loadDynamicScript = () => {

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

window.addEventListener('load', loadDynamicScript);

注意我已经尝试过 window.addEventListener('DOMContentLoaded', loadDynamicScript); 但这意味着 /my-dynamic-script.js 加载得太快了。

出乎意料的是，my-dynamic-script.js 中的任何 window.onload 事件侦听器现在都不起作用。

我猜这是因为事件侦听器会侦听 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 事件侦听器的第三个参数。否则，当您调度 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);