Question

我创建了一个与Dom一起工作的脚本，所以它必须等到Dom准备就绪才能执行每个操作。我希望这个脚本可以通过两种方式包含在内：

在head标签中，以便在Dom准备好之前加载它。我已经使用了document.addEventListener("DOMContentLoaded",function(){...},false)，但效果很好
当Dom已装载时，以负面方式加载。在这种情况下，脚本不起作用，因为由于某些原因，如果Dom已经加载，则不会触发DOMContentLoaded事件

所以我想知道，有没有办法检查Dom是否已经加载，以便脚本可以在不使用DOMContentLoaded事件的情况下执行代码？

PS：这必须是一个外部脚本，所以我无法控制它将被包含的页面

Answer 1

好的，这很俗气但它应该有效：将您的外部脚本包装在init（）方法中：

e.g。（而我只是在这里猜测）

var myModule = {

    init: function {
        //all the code goes here
        /..
    }
 }

然后将脚本导入回到head标记中，并在DOM标记的最底部添加脚本标记

<script>
    myModule.init();
</script>

我再也不会推荐它但是如果你需要避免检查DOM加载的事件那就是我要做的事情

Answer 2

最简单的方法之一就是检查你是否可以在页面末尾获取getElementById。类似的东西：

if (document.getElementById('footer')) { /* Dom is probably loaded */ }
else { /* Dom is probably NOT loaded */ }

但实际上，最佳做法可能是确保代码始终以相同的方式调用。您可以使用'onload'事件，因为它可以在所有浏览器中使用，并且通常只在DOMContentLoaded事件之后的几分之一秒内。但是，我想这完全取决于你。

Answer 3

定义你的功能： function domReadyHandler() { /* ... */ }

添加事件监听器： document.addEventListener('DOMContentLoaded', domReadyHandler, false);

在动态加载内容后执行处理程序： function myXhrCallback() { /* ... */; domReadyHandler(); }

Answer 4

您可以设置一个全局变量，表示脚本是动态包含的，根据此情况，您可以在评估脚本时触发加载侦听器。

window.SCRIPT_IS_DYNAMICALLY_LOADED = true;
< include script>

在剧本中：

if (window.SCRIPT_IS_DYNAMICALLY_LOADED) {
     domContentLoadedListener();
} else {
     document.addEventListener("DOMContentLoaded",domContentLoadedListener, false);
}

Answer 5

检查document.readyState的值。如果值为“complete”，则可以执行脚本，如果是其他内容，则添加侦听器。

Firefox DOMContentLoaded事件问题

5 个答案: