javascript - <script> onload 在...时触发？

Mozilla 的以下函数中，JS 用于将标签添加到文档中。 onload 事件触发时我很困惑。 onload 是在脚本开始下载还是已经下载时触发？

function prefixScript(url, onloadFunction) {
  var newScript = document.createElement("script");
  newScript.onerror = loadError;
  if (onloadFunction) { newScript.onload = onloadFunction; }
  document.currentScript.parentNode.insertBefore(newScript, document.currentScript);
  newScript.src = url;
}

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement

谢谢

最佳答案

onload 当这些都完成时调用的回调:

获取脚本文件的 HTTP 请求已成功完成
脚本内容已解析
脚本已被执行，因此可能会暴露新的全局变量和/或触发副作用，如 DOM 操作或 XHR

这是一个演示，其中将 jQuery 库的脚本添加到 <head> ，从而公开全局变量 $通过执行导入的脚本创建:

const script = document.createElement('script');
script.onload = () => {
  try {
    $;
    console.log('onload - $ is defined');
  } catch(e) {
    console.log('onload - $ is not defined yet');
  }
}

script.src = 'https://code.jquery.com/jquery-3.3.1.js';

try {
  $;
  console.log('main - $ is defined');
} catch(e) {
  console.log('main - $ is not defined yet');
}
document.head.appendChild(script);

Last precision - int 在这种情况下，加载是通过将脚本附加到 DOM 触发的，而不是由 script.src = ... 触发的!尝试注释掉最后一行 - 脚本永远不会加载。

还可能存在负载由 script.src = ... 触发的其他情况，例如，当脚本附加到 DOM 时，.src已设置。

关于javascript - <script> onload 在...时触发？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56449922/