如何等待 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

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

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

更新：

您的问题 'how to wait for document.write' 的答案是您不必这样做，因为 document.write 是同步的。 document.write 之后的下一行只会在 write 方法完成写入后执行。但是，如果您使用 src 属性将 <script> 标记写入文档，则资源（src 指向的位置）的加载将是异步的，并且将在写入完成后开始 in paralell 与下一个语句。因为不可能提前知道加载资源需要多长时间，所以确保外部脚本中的所有内容都可用的唯一可行方法是 onload 事件。

Answer 2

document.write 已经阻塞执行，直到信息被解析和处理。因此，您的示例不需要任何额外的代码。

另一方面，我建议使用 DOM 注入而不是 document.write。 document.write 延迟 CSS 处理并可能导致 FOUC（无样式内容的 Flash）。

DOM注入可以这样进行：

var scriptElm = document.createElement('script');
scriptElm.src = '/js/jquery.js';
document.getElementsByTagName('head')[0].appendChild( scriptElm );

// Check if jQuery is loaded here

如何等待 document.write 完成

How to wait for document.write to complete

javascript

jquery

fallback

cdn