Dynamically loading JavaScript through asynchronous requests (Ajax)

Question

Dynamically loading JavaScript through asynchronous requests (Ajax)

In a recent discussion on Stack Overflow, the topic of loading JavaScript code to an HTML file at runtime was raised. One method suggested involves simple loading an external JS file and executing it. However, there are two key issues with this approach: the timing of execution is uncertain and customization options are limited.

The following code snippet was shared:

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);

I have been using this code within an HTTP request where the variable result contains customized code generated by a PHP script. This allows me to dispatch functions that require this dynamic code.

Unfortunately, this solution does not work in Internet Explorer 8 or older versions. Should we continue exploring ways to make it compatible with these outdated browsers, or is it time to move on?

Any suggestions for alternative approaches?

javascript ajax

Answer 1

Answer №1

If you're looking for a solution that is compatible with both Vanilla JS and jQuery, I recommend considering require.js. You can learn more about how it works here, especially in terms of loading scripts after the page has loaded.

For even more control over script loading in older and newer browsers, consider using the DomReady plugin provided by require.js. You can find more information on this feature here.

Answer 2

If you're looking for a solution that is compatible with both Vanilla JS and jQuery, I recommend considering require.js. You can learn more about how it works here, especially in terms of loading scripts after the page has loaded.

For even more control over script loading in older and newer browsers, consider using the DomReady plugin provided by require.js. You can find more information on this feature here.

Answer 3

Answer №2

Update: Final Resolution:

In versions of Internet Explorer 8 and below, it is not possible to manipulate a script's code using innerHTML, innerText, appendChild(txtNode), or any other DOM manipulation techniques. The only viable method to execute a script enclosed within a string is by utilizing the eval function. This snippet has undergone testing in Chrome, Firefox, Safari, IE9, IE8, and IE7.

(function (window, undefined) {

    var loaded = false;

    function onScriptLoaded() // triggers after the external script loads
    {
        if (loaded)
            return;

       // this flag prevents redundant execution in IE versions supporting onload 
        loaded = true;

        // sample JavaScript retrieved from a PHP file
        var phpScriptText = "window.alert('This was added to external script using PHP');";

        // ensures cross-browser compatibility for this process
        window.eval.call(window, phpScriptText);
    }

    window.onload = function () { // loads external script and invokes onScriptLoaded upon completion
        var doc = window.document;

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

        // handling 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);

Answer 4

Update: Final Resolution:

In versions of Internet Explorer 8 and below, it is not possible to manipulate a script's code using innerHTML, innerText, appendChild(txtNode), or any other DOM manipulation techniques. The only viable method to execute a script enclosed within a string is by utilizing the eval function. This snippet has undergone testing in Chrome, Firefox, Safari, IE9, IE8, and IE7.

(function (window, undefined) {

    var loaded = false;

    function onScriptLoaded() // triggers after the external script loads
    {
        if (loaded)
            return;

       // this flag prevents redundant execution in IE versions supporting onload 
        loaded = true;

        // sample JavaScript retrieved from a PHP file
        var phpScriptText = "window.alert('This was added to external script using PHP');";

        // ensures cross-browser compatibility for this process
        window.eval.call(window, phpScriptText);
    }

    window.onload = function () { // loads external script and invokes onScriptLoaded upon completion
        var doc = window.document;

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

        // handling 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);

Dynamically loading JavaScript through asynchronous requests (Ajax)

Answer №1

Answer №2

Similar questions

There is a lack of output coming from jasmine-node

What is the significance of the NS_ERROR_UNKNOWN_PROTOCOL error code?

Issue with numeric values not rendering properly using range slider in Ionic

What steps do I need to take in order to showcase my mongoose collection data on the user's screen?

Oops! The specified vue-router route name cannot be found

Display a popup box upon receiving the response from an AJAX request

the process of altering properties in vue js

The loading of charts and animations is sluggish on mobile devices

Tips for integrating Grails ${createLink} into your javascript code

Transforming Poloniex API Callback JSON into a compatible format for Highcharts.Stockchart

Having difficulty uploading an image using Ajax in Firefox

Submitting multiple parameters in a Jquery POST request

During the jest test, I encountered a timeout error indicating that the test exceeded the 5000 ms limit

What causes a function to be returned as null when it is appended or assigned as textContent?

Having trouble with Webpack unable to locate the necessary import for Typescript type resolution? Need help resolving this issue?

JavaScript group by first letter issueI am facing a problem when trying

Modifying Array Values in Angular 7

Trying out the Send feature of Gmail API using Postman

Execute the task from an external JavaScript file using npm

Implementing conditional visibility of divs in HTML using Bootstrap 4 dropdown-menu selection