Question

在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

谢谢

Answer 1

完成这些操作后，将调用

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);

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

在其他情况下，负载是由script.src = ...触发的，例如，当脚本被添加到DOM时，.src就会被设置。

Answer 2

来自MDN GlobalEventHandlers.onload docs：

在加载给定资源时触发load事件。

在开始加载该资源时，还会调用onloadstart事件。

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

2 个答案: