Javascript

Question

当我的外部脚本完成加载时，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-manupilating javascript 代码。

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

感谢阅读！

Answer 1

Is the DOM always ready when my external scripts have finished loading?

~~大概是吧~~ 不是吧

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

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

~~但如果您担心它可能存在边缘情况，~~您可以随时使用 ready打回来。如果 jQuery 已经触发了 ready 回调并且您挂接了另一个回调，jQuery 会立即调用它。

Answer 2

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

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

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

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

Javascript - DOM ready after loading external javascript?

external

document-ready