javascript - 如何等待 document.write 完成

Question

我正在尝试编写一些脚本回退代码，以便如果 jQuery 和 jQuery Validator 无法从 CDN 获得，我会加载本地版本。请注意，以下脚本位于单独的文件中以支持内容安全策略 (CSP)。

(window.jQuery || document.write('<script src="/js/jquery.js"><\/script>'));
($.validator || document.write('<script src="/js/jquery-validate.js"><\/script>'));

如果 jQuery 不可用，则会在文档末尾写入一个新的脚本标记，但下一行会出错，指出 $ 未定义。如何等待文档写入完成加载文档再执行下一行？

Answer 1

您应该使用 onload <script> 事件.而不是 ducoment.write ，通过 DOM 操作向文档添加脚本标签:

var s = document.createElement('script');
s.onload = function() {
  // jQuery is now loaded and can be used
}
s.src = '/js/jquery.js';
document.getElementsByTagName('head')[0].appendChild(s);

更新:

您的问题“如何等待 document.write”的答案是您不必这样做，因为 document.write是同步的。 document.write 之后的下一行只有在 write 方法完成写入后才会执行。然而，如果你写一个 <script>使用 src 标记到文档中属性，资源的加载(src 指向的位置)将是异步的，并且将在与下一条语句并行写入完成后开始。因为不可能提前知道加载资源需要多长时间，所以确保外部脚本中的所有内容可用的唯一可行方法是 onload事件。