Javascript - 加载外部 javascript 后 DOM 准备好了吗？答案

【问题标题】：Javascript - DOM ready after loading external javascript?Javascript - 加载外部 javascript 后 DOM 准备好了吗？
【发布时间】：2015-10-28 12:20:28
【问题描述】：

当我的外部脚本完成加载后，DOM 是否总是准备就绪？

<head>
    <script type="text/javascript" src="base.js"></script>
</head>

在 base.js 中，我有一个加载外部脚本的对象。它使用以下方法来做到这一点：

var head = document.getElementsByTagName("head")[0],
    scriptElement = document.createElement("script");

scriptElement.type = "text/javascript";
scriptElement.onreadystatechange = function () {
    if (this.readyState === "complete") onModuleLoaded();
};
scriptElement.onload = onModuleLoaded;
scriptElement.src = "externalScript.js";
head.appendChild(scriptElement);

现在，当所有外部脚本都加载完毕后，就会调用回调函数。我的问题是：这个回调函数是否适合放置我的javascript代码的其余部分在哪里？此代码需要准备好 DOM。

我的脚本也使用 jQuery。但我不认为我可以使用

$(document).ready(function () { ... });

因为在我的脚本加载之前触发的测试。但是，我不知道这是否会一直如此。如果可以，我的回调函数就适合我的 DOM 操作 javascript 代码。

但如果我的脚本可以在 DOM 准备好被操作之前加载，我需要找到另一种方法。

感谢您的阅读！

【问题讨论】：

始终在 html 文件的末尾包含您的以及外部的 js 文件。即在结束正文标记之前，并在最后包含用户脚本文件。
如果您使用的是 jQuery，为什么不使用 $.getScript 而不是自己解决浏览器不一致问题（onreadystatechange 与 onload）？此外，IIRC，有些浏览器会触发 both，因此您可以收到两次对 onModuleLoaded 的调用；如果你不切换到getScript，你可能需要一个标志（如果你还没有）。
我不知道 $.getScript 方法，我对 jQuery 很陌生。虽然也许我应该更好地搜索 jQuery 解决方案。下次我会的。

标签： javascript external document-ready

【解决方案1】：

检查jQuery.holdReady()。如果您尝试通过getScript 加载外部js，那么您可以轻松做到这一点。

延迟 ready 事件，直到加载自定义插件：

$.holdReady( true );
$.getScript( "externalScript.js", function() {
  $.holdReady( false );
});

【讨论】：

非常感谢！正是我想要的。我刚开始使用 JQuery，不知道该功能。
太棒了。很高兴知道:)
holdReady 是解决这个问题的好方法，很好。并没有真正回答所提出的问题（“当我的外部脚本完成加载时，DOM 是否总是准备就绪？”），但是......

【解决方案2】：

当我的外部脚本完成加载后，DOM 是否总是准备就绪？

~~可能，是的。~~ 不是。

动态添加script 元素load their scripts asynchronously。您不能使用 jQuery 的 ready 回调是非常正确的，因为它会查看主 HTML 定义的 DOM 何时完全加载，这很可能是在您的附加脚本加载之前。

~~如果在调用 onModuleLoaded 回调之前没有加载主 DOM，我会非常非常惊讶。所以很可能，是的，它会准备好的。~~ 让我感到惊讶。我进行了实验，你猜怎么着？脚本加载和回调可能会在页面的其余部分被处理之前发生。 （这就是我测试我的假设的原因。）

~~但如果你担心它周围可能存在边缘情况，~~你可以随时在你的回调中使用ready。如果 jQuery 已经触发了 ready 回调并且你钩住了另一个回调，jQuery 会立即调用它。

【讨论】：

谢谢！这很好解释。知道 jQuery 仍然调用回调是一件好事，即使在事件被触发之后也是如此。我认为 $.holdReady(true) 非常具有描述性。
@MPS：同意，holdReady 是解决您的问题的好方法。