如何等待 document.write 完成答案

【问题标题】：How to wait for document.write to complete如何等待 document.write 完成
【发布时间】：2015-07-05 23:12:21
【问题描述】：

我正在尝试编写一些脚本回退代码，以便如果 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 不可用，则将新的脚本标签写入文档末尾，但下一行错误表明 $ 未定义。如何在执行下一行之前等待文档写入完成加载文档？

【问题讨论】：

删除了jquery-validate 标签，因为问题/问题/解决方案与此插件没有特别的关系，可以应用于任何 CDN 托管脚本。

标签： javascript jquery cdn fallback

【解决方案1】：

您应该利用<script> 的onload 事件。而不是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 事件。

【讨论】：

【解决方案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

【讨论】：

但是在您的代码注释说“检查 jQuery 是否已加载”时，OP 需要等待它加载。你是怎么做到的？
那么为什么 $ 在第二行没有定义呢？
@RehanSaeed $ 是 undefined，直到 脚本已加载。 document.write() 调用已成功完成，但在执行第二行时尚未加载脚本