功能检测支持DOMContentLoaded事件

Feature detect support for DOMContentLoaded event

本文关键字：事件 DOMContentLoaded 支持 检测 功能      更新时间：2023-09-26

是否可以检测到对DOMContentLoaded事件的支持？

方法类似于Kangax的解决方案，因为DOMContentLoaded没有作为任何元素的属性公开：在没有浏览器嗅探的情况下检测事件支持

只需监听所有三个事件，第一个事件就会触发胜利。如果获胜者是DOMContentLoaded，则支持它。如果在其他两个中的一个被触发时它还没有被触发，那么它就不受支持。

<script>
    var hasDOMContentLoaded = false,
        ready = false,
        readyMethod = null;
    // Listen for "DOMContentLoaded"
    document.addEventListener("DOMContentLoaded", function(event) {
        hasDOMContentLoaded = true;
        init("DOMContentLoaded");
    });
    // Listen for "onreadystatechange"
    document.onreadystatechange = function () { init("onreadystatechange"); }
    // Listen for "load"
    document.addEventListener("load", function(event) { init("load"); });
    // Gets called after any one of the above is triggered. 
    function init(method) {
        if(!ready) {
            ready = true;
            readyMethod = method;
            go();
        }
    }
    // Page is ready, time is up. 
    // Eitehr DOMContentLoaded has been triggered or it never will.
    function go() {
        console.log("hasDOMContentLoaded: ", hasDOMContentLoaded);
        // My initialization code here
    }
</script>

实际上&实际上，不需要DOMContentLoaded事件。由于HTML流加载的原理，任何脚本都可以用来确定文档HTML是否被完全解析。

您所要做的就是将函数（否则会分配给DOMContentLoaded事件）放在文档的结束标记之前。

它将在最后一个HTML元素被解析为DOM之后执行，并且它将比内置的DOMContentLoaded执行得更快、更早。

我发现以下关于mozilla开发人员站点中DOMContentLoaded事件用法的解释非常有用。最后，它谈到了实现相同目标的向后兼容方法，我在这里提取了这些方法（毫不奇怪，它专注于IE）。。。

Internet Explorer 8支持readystatechange事件，该事件可以用于检测DOM何时就绪。在早期版本的Internet中Explorer，可以通过重复尝试执行来检测此状态document.dococumentElement.doScroll（"left"）；，因为这个片段会抛出一个错误，直到DOM准备好。

相关文章：