Javascript DOMContentLoaded event not firing in Internet Explorer - Stack Overflow

admin管理员组

文章数量:1201993

I have the following code to attach a function to the DOMContentLoaded event, but the function is never called in Internet Explorer 11

Code:

if (document.addEventListener) {
   document.addEventListener("DOMContentLoaded", init, false);
}
else {
   document.attachEvent("onDOMContentLoaded", init);
}

I have the following code to attach a function to the DOMContentLoaded event, but the function is never called in Internet Explorer 11

Code:

if (document.addEventListener) {
   document.addEventListener("DOMContentLoaded", init, false);
}
else {
   document.attachEvent("onDOMContentLoaded", init);
}

• javascript
• internet-explorer
• dom-events

Share Improve this question Follow edited Feb 9, 2021 at 9:46 Brian Tompsett - 汤莱恩 5,8837272 gold badges6161 silver badges133133 bronze badges asked Jul 23, 2014 at 7:13 Cedric KrauseCedric Krause 38111 gold badge66 silver badges1717 bronze badges 1

• Can you specify where you are calling this code, any on document load or button click!?? Please create a jsFiddle so that we can help better. – MarmiK Commented Jul 23, 2014 at 7:35

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 14

There are several reasons it might not fire:

1. It has already fired (before you attached the event handler) and you missed it.
2. You're running an older version of IE that doesn't support the DOMContentLoaded event.
3. There's some sort of script error before these lines of code so these lines of code are not actually executed and thus the event handler is never actually registered.
4. You're trying to do this on an embedded iFrame and may not have the correct document for the iFrame (some browsers can switch the document when loading external source).

To check for script errors, you should open the debug console in IE (press F12) and look at the console to see if any script errors are being reported.

You can check to see if document.readyState === "complete" to see if it has already fired.

And, in versions of IE before IE9 where you would need attachEvent, IE doesn't support DOMContentLoaded so your else branch would not work. You would have to use different detection methods in those older versions of IE.

You can see a well tested, cross-browser, plain javascript function for getting notified when the document is ready here: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it.

To break this down with a workable example see below. The issue I found was that DOMContentLoaded won't fire for javascript unless the event is created inline within the document itself.

A simple solution for this is to add a check to the document readyState. If it's still loading - create the event because it's possible for DOMContentLoaded to fire - Otherwise just load immediately because DOM is ready.

var load = function () {
    console.log('I will always load, woohoo');
};

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', load); // Document still loading so DomContentLoaded can still fire :)
} else {
    load();
}

本文标签： Javascript DOMContentLoaded event not firing in Internet ExplorerStack Overflow