javascript - Feature detect support for DOMContentLoaded event - Stack Overflow

admin管理员组

文章数量:1417070

Is it possible to detect support for the DOMContentLoaded event?

Method's like Kangax's solution here won't work because DOMContentLoaded is not exposed as a property of any element: Detecting event support without browser sniffing

Is it possible to detect support for the DOMContentLoaded event?

Method's like Kangax's solution here won't work because DOMContentLoaded is not exposed as a property of any element: Detecting event support without browser sniffing

• javascript
• events
• dom-events
• browser-feature-detection
• domcontentloaded

Share Improve this question Follow edited Dec 8, 2021 at 14:52 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 7, 2013 at 3:49 Web_DesignerWeb_Designer 74.8k9393 gold badges210210 silver badges267267 bronze badges 8

• A dive into something like the jQuery source should be informative. – Pointy Commented Aug 7, 2013 at 3:57
• Why don't use patibility table? – Mics Commented Aug 7, 2013 at 4:11
• @Mics Cause that's browser detection not feature detection. – Web_Designer Commented Aug 7, 2013 at 4:15
• @Pointy jQuery isn't detecting for support they just use load as a fallback. Not really what I'm looking for: github./jquery/jquery/blob/master/src/core.js#L813 – Web_Designer Commented Aug 7, 2013 at 4:19
• Here's an old forum thread on the subject: webcache.googleusercontent./… – Web_Designer Commented Aug 7, 2013 at 5:55

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

Just listen for all three events and the first one triggered wins. If the winner is DOMContentLoaded, it's supported. If it hasn't been triggered by the time one of the other two has been triggered, then it's not supported.

<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>

Actually & Factually, there is no need for DOMContentLoaded Event. Any script can be used to determine, if the document HTML was pletely parsed thanks to the principle of html stream load.

All you have to do, is to put the function (you would otherwise assign to the DOMContentLoaded event) right before the closing tags of your document(s).

It will execute exactly after the last HTML element has been parsed to DOM, and it will execute a bit faster and earlier than the built-in DOMContentLoaded will do.

I found the following explanation about usage of the DOMContentLoaded event from the mozilla developer site very useful. At the end it talks about backwardly patible ways to do achieve the same thing, which I have extracted here (no surprise it concentrates on IE)...

Internet Explorer 8 supports the readystatechange event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute document.documentElement.doScroll("left");, as this snippet will throw an error until the DOM is ready.

本文标签： javascriptFeature detect support for DOMContentLoaded eventStack Overflow