火狐DOMContentLoaded事件问题

Question

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

• 在head标记中，以便在Dom准备就绪之前加载它。为此，我使用了document.addEventListener("DOMContentLoaded",function(){...},false)，当Dom已经加载时，
• 可以很好地加载。在本例中，脚本无法工作，因为由于某些原因，如果已经加载了Dom，则DOMContentLoaded事件不会触发

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

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

Answer 1

好的，这很俗气，但是它应该能工作:将外部脚本包装在init()方法中：

(我只是在猜)

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