Loading JavaScript at runtime using Ajax

Question

In the post How to load javascript code to an html fil there is a way to simple load an external js at runtime, and execute. But there is two issues: we don't know when it will be executed and we can't customize the code.

I was using this code:

var elemScript=document.createElement('script');
elemScript.setAttribute('type', 'text/javascript');
elemScript.setAttribute('language', 'javascript');
var txt = document.createTextNode(result);
elemScript.appendChild(txt);
document.head.appendChild(elemScript);

inside of an http request where result is the code provided by a php that make a customized code for me. Above I can dispatch some function that needs the code etc..

But this beauty doesn't work in IE8 or older. Is there a way of make it work or maybe it's time to forget about these old navigators?

Any suggestions?

Nick Tomlin · Accepted Answer · 2013-01-03 22:25:25Z

1

I would suggest require.js, which will work with Vanilla JS / jQuery. Here is an example of loading a script after page load.

Additionally, you can use the require.js DomReady plugin for greater control in legacy and modern browsers.

answered Jan 3, 2013 at 22:25

Nick Tomlin

29.4k12 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gustavo Over a year ago

Thanks, it's a complete solution. But I'm trying to avoid extensive code for one single task, not sure if it's possible. The require.js perform a lot of tasks including simple cleaner, some prototypes to complete IE8 js core, and other things. As he says, it seams IE8 doesn't fire the code in a simple loader - I'll try to understand this part to make my own solution. Thanks.

wired_in · Accepted Answer · 2013-01-04 19:34:52Z

1

Edit: Final Solution:

IE8 and below do not allow you to modify a script's code at all using innerHTML, innerText, appendChild(txtNode), or any other type of DOM manipulation. The only way to execute a script contained inside of a string is to use eval. The below code has been tested in chrome, firefox, safari, IE9, IE8, and IE7.

(function (window, undefined) {

    var loaded = false;

    function onScriptLoaded() // executes after external script has loaded
    {
        if (loaded)
            return;

        // this flag is to prevent versions of ie that do support onload 
        // from executing this function twice
        loaded = true;

        // example javascript loaded from php file
        var phpScriptText = "window.alert('This was added to external script using php');";

        // this is the only way for this to work accross all browsers
        window.eval.call(window, phpScriptText);
    }

    window.onload = function () { // load external script and execute onScriptLoaded when it's done loading
        var doc = window.document;

        var script = doc.createElement("script");
        script.type = "text/javascript";
        script.src = "externalScript.js";
        script.async = true;
        script.onload = onScriptLoaded; // works in most browsers

        // for IE
        if (script.onreadystatechange !== undefined) {
            script.timer = setInterval(function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    onScriptLoaded();
                    clearInterval(script.timer);
                }
            }, 100);
        }

        doc.getElementsByTagName("head")[0].appendChild(script);
    };

})(window);

edited Jan 4, 2013 at 19:34

answered Jan 3, 2013 at 18:53

wired_in

2,6133 gold badges28 silver badges32 bronze badges

8 Comments

Gustavo Over a year ago

jQuery is for lazy developers! Give me some pure JavaScript code and we talk serious!

wired_in Over a year ago

I'm not sure what your asking... if you just want to load a script that is dynamically generated from a php file. Just load a script like your above code, and set the src to the php file, then have the php file print out the javascript code with a ContentType of "application/x-javascript"

wired_in Over a year ago

I updated my answer, let me know if that's not what you're looking for.

wired_in Over a year ago

added something a little more 'pure'

wired_in Over a year ago

this executes your custom code as soon as the external script is loaded. The way you were trying to do it was to actually modify the external script before inserting it in the DOM and executing it, which can't be done since you have to insert the external script in the DOM before it will load, and there is no way to stop it from automatically executing once it's loaded. My solution has the same ultimate effect. It executes your code as if it were at the bottom of the script that's loaded.

|

Collectives™ on Stack Overflow

Loading JavaScript at runtime using Ajax

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related