1

At present, I have a javascript callable functions (without adding global variables) that add scripts to the head.

Onload is useful for pages after the site loaded initially, but I'm waiting to load larger scripts until they're needed considering many won't need them.

The following code works for some scripts, but not for some larger ones...

function include(script) {
    var head= document.getElementsByTagName('head')[0];
    var newScript= document.createElement('script');
    newScript.type= 'text/javascript';
    newScript.src= script;
    head.appendChild(newScript);
}
function doThething(){
    include('foo');
    include('bar');
    if(document.readyState === "complete") {
        // do something needing foo and bar
    } else {
        window.addEventListener("onload", function () { 
            // do something needing foo and bar
        }
    }
}

With some scripts, the above works fine and dandy. With others (especially largers ones that client doesn't have)it tries to execute before foo has loaded. I can't change foo because it's a larger off-site public library.

How can I make it make the dom wait for the new stuff to finish loading and kick off an onload again, or otherwise ensure that foo is loaded before I doTheThing?

lilHar
  • 1,735
  • 3
  • 21
  • 35
  • possible duplicate of ['onload' handler for 'script' tag in internet explorer](http://stackoverflow.com/questions/4845762/onload-handler-for-script-tag-in-internet-explorer) – Heretic Monkey Sep 29 '15 at 16:22
  • @MikeMcCaughan Above question is, in title, about IE specifically, just judging by the title. Although it does have relevant information. Relevant, but not duplicate. – lilHar Sep 29 '15 at 17:50
  • Also it should be pointed out the solutions in the linked to section add some global variables, which is something the given example isn't doing (and something I've been trying to avoid... apologies for not making that clearer. I'm trying to do it via more modular callable functions.) – lilHar Sep 29 '15 at 17:56
  • 1
    I don't think the question is a duplicate of that other question, but I think the answer from that question (which I have linked to below) is relevant. Have you tried it? – Chris Lear Sep 29 '15 at 18:08
  • @Chris I'm still trying to figure how to modify it to factor it into my larger project to test and be functional. As is, doesn't quite work for me due to external-to-function globals. – lilHar Sep 29 '15 at 18:20
  • @ChrisLear Checked, looks to be useful code in the right situation, but doesn't work in my context. (Tried turning it into a function, basically switching out my include for it, wrapped in `function include(s){ }`, but still getting not-loaded errors.) Maybe I'm missing the best way to implement it, but I'm short on sleep today. :/ – lilHar Sep 29 '15 at 18:59

1 Answers1

3

You want a script onload, not a document onload. See the accepted answer here:

'onload' handler for 'script' tag in internet explorer

This is the code to admire:

var head = document.getElementsByTagName("head")[0] || document.documentElement;
var script = document.createElement("script");
if ( s.scriptCharset ) {
    script.charset = s.scriptCharset;
}
script.src = s.url;

// Handle Script loading
    var done = false;

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
    if ( !done && (!this.readyState ||
            this.readyState === "loaded" || this.readyState === "complete") ) {
        done = true;
        jQuery.handleSuccess( s, xhr, status, data );
        jQuery.handleComplete( s, xhr, status, data );

        // Handle memory leak in IE
        script.onload = script.onreadystatechange = null;
        if ( head && script.parentNode ) {
            head.removeChild( script );
        }
    }
};

// Use insertBefore instead of appendChild  to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore( script, head.firstChild );
Community
  • 1
  • 1
Chris Lear
  • 6,592
  • 1
  • 18
  • 26