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

Question

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

Run Code Online (Sandbox Code Playgroud)

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

谢谢

Answer 1

Nin*_*liu 6

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

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 2

Cri*_*sty -3

来自MDN GlobalEventHandlers.onload 文档：

当给定资源加载时，将触发 load 事件。

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

答案是正确的，但恕我直言，“onload”在加载时触发是完全微不足道的 (4认同)
为什么跑题了？堆栈溢出变成了什么......？如果您在 GlobalEventHandlers.onload 和脚本标记的资产加载之间建立了联系，您的答案将会更有帮助。 (2认同)

归档时间：	6 年，8 月前
查看次数：	5295 次
最近记录：	6 年，8 月前

&lt;script&gt; onload 在...时触发？

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