document.attachEvent() not working in IE8

Question

I am aware that in Internet Explorer (Pre-IE9) you cannot use document.addEventListener(), instead you must use document.attachEvent. The problem I'm having is that document.attachEvent('onload', AddExternals); does nothing, at all. In the console, the output should be as follows:

- document.attachEvent - Adding Externals... - jQuery loaded!

However in IE8, the console output is:

Is there any obvious reason why this would occur in the below code?

if (document.addEventListener) {                    
    console.log("document.addEventListener")
    document.addEventListener("DOMContentLoaded", AddExternals);
} else if (document.attachEvent) {                  
    console.log("document.attachEvent")
    document.attachEvent("onload", AddExternals);
}

function AddExternals(){
    console.log("Adding Externals...");
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(jq);   
    jq.onload = function(){console.log("jQuery loaded!")};
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";

}

Edit

I have changed document.attachEvent("onload", AddExternals) and now the console is outputting both document.attachEvent and Adding Externals... but the function never completes?

maybe because that event never gets triggered on the document? ... — Kevin B, Dec 18 '15 at 16:01
Older versions of IE have no equivalent of DOMContentLoaded. — Kevin B, Dec 18 '15 at 16:02
window load. it will trigger much later than DOMContentLoaded, but it's your only option other than moving all code to the end of the page, thus removing the need for the event all together. — Kevin B, Dec 18 '15 at 16:03
Okay I've got a step further. I now have both `document.attachEvent` and `Adding Externals...` in the console, but the function never completes? — Mike Resoli, Dec 18 '15 at 16:07
Possible dupe? http://stackoverflow.com/questions/65434/getting-notified-when-the-page-dom-has-loaded-but-before-window-onload — Kevin B, Dec 18 '15 at 16:07
@MikeResoli - see the possible explanation in my answer. Old versions of IE do not have `.onload` for a script tag so it may be working, but you don't see the console message. — jfriend00, Dec 18 '15 at 16:19

score 1 · Accepted Answer · edited May 23 '17 at 12:23

As far as I know, there is no document.onload event. Instead, you would use window.onload as your fallback. You may also have to test the document state to make sure that it is not already loaded (e.g. the events have already fired).

For a completely tested function to know when the document is ready in any level of browser see the code in this prior question/answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Keep in mind that older versions of IE do not have a .onload for your script tag so you will not necessarily see that console message, but your script should still load. There is a more complicated scheme that will get you notified of when it is loaded for older versions of IE here: javascript notify when script is loaded dynamically in IE

I would suggest you change your script to this:

function AddExternals(){

    var doneLoad = false;
    function onload() {
        if (!doneLoad) {
            doneLoad = true;
            console.log("jQuery loaded!")
        }
    }

    console.log("Adding Externals...");
    var jq = document.createElement("script");
    jq.type = "text/javascript";
    jq.onload = doneLoad;
    jq.onreadystatechange= function () {
        if (script.readyState == "loaded" || script.readyState == "complete"){
            doneLoad();
        }
    };
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
    document.getElementsByTagName("head")[0].appendChild(jq);   

}

Relevant changes:

Added support for older method of knowing when the script has loaded.
Made sure there is no duplicate load notification since listening for multiple mechanisms
Set .src before inserting the script tag.

document.attachEvent() not working in IE8

1 Answers1