Question

141

Dynamically loading JavaScript synchronously

rated 0 times [ 147] [ 6] / answers: 1 / hits: 77658 / 14 Years ago, fri, may 21, 2010, 12:00:00

I'm using the module pattern, one of the things I want to do is dynamically include an external JavaScript file, execute the file, and then use the functions/variables in the file in the return { } of my module.

I can't figure out how to do this easily. Are there any standard ways of performing a pseudo synchronous external script load?

function myModule() {

    var tag = document.createElement(script);

    tag.type = text/javascript;

    tag.src = http://some/script.js;

    document.getElementsByTagName('head')[0].appendChild(tag);



    //something should go here to ensure file is loaded before return is executed



    return {

        external: externalVariable 

    }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tyemathewj

Add To Favorites

Follow

Total Points: 484

Total Questions: 107

Total Answers: 111

Location: Equatorial Guinea

Member since Sun, Feb 14, 2021

3 Years ago

answered 14 Years ago zariahdiamondz · Accepted Answer

There is only one way to synchronously load and execute a script resource, and that is using a synchronous XHR

This is an example of how to do this

// get some kind of XMLHttpRequest

var xhrObj = createXMLHTTPObject();

// open and send a synchronous request

xhrObj.open('GET', script.js, false);

xhrObj.send('');

// add the returned content to a newly created script tag

var se = document.createElement('script');

se.type = text/javascript;

se.text = xhrObj.responseText;

document.getElementsByTagName('head')[0].appendChild(se);

But you shouldn't in general use synchronous requests as this will block everything else.
But that being said, there are of course scenarios where this is appropriate.

I would probably refactor the containing function into an asynchronous pattern though using an onload handler.