Dynamically load scripts at runtime and verify their successful loading

Question

Dynamically load scripts at runtime and verify their successful loading

My script file needs to dynamically import another script and utilize the functions and variables defined inside it.

Currently, I am adding it to the HEAD section of the Page. However, after the addition, the functions and variables from the outer script are not fully loaded and available for use. How can I ensure that the script is completely loaded?

I have attempted to use script.onreadystatechange and script.onload callbacks, but I am encountering some browser compatibility issues.

What is the safest way to achieve this with pure JS while maintaining decent browser compatibility?

Sample:

uno.js:

var script = document.createElement("script");
script.src = "dos.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
alert(outerVariable); // undefined

dos.js:

var outerVariable = 'Done!';

sample.html

<html>
    <head>
        <script type="text/javascript" src="uno.js"></script>
    </head>
    ...
</html>

javascript

Answer 1

Answer №1

If you are worried about compatibility with non-IE browsers, a good approach would be to utilize DOMContentLoaded to check if the script has fully loaded.

To learn more about DOMContentLoaded, you can visit this link

Interestingly, this is similar to how JQuery operates with document ready. Here's an excerpt from the jquery source code:

    // Code snippet from jQuery source demonstrating logic for handling DOMContentLoaded event
    if ( document.addEventListener ) {
                // Use the handy event callback
                document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

                // Fallback to window.onload, which will always work
                window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // Fallback to window.onload, which will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }

If you're interested in learning how to implement similar functionality like JQuery, you can refer to the bind ready function in the full source code of JQuery.

Answer 2

If you are worried about compatibility with non-IE browsers, a good approach would be to utilize DOMContentLoaded to check if the script has fully loaded.

To learn more about DOMContentLoaded, you can visit this link

Interestingly, this is similar to how JQuery operates with document ready. Here's an excerpt from the jquery source code:

    // Code snippet from jQuery source demonstrating logic for handling DOMContentLoaded event
    if ( document.addEventListener ) {
                // Use the handy event callback
                document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

                // Fallback to window.onload, which will always work
                window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // Fallback to window.onload, which will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }

If you're interested in learning how to implement similar functionality like JQuery, you can refer to the bind ready function in the full source code of JQuery.

Answer 3

Answer №2

Up to now, this method appears to be the most effective. It has been tested on IE9, Firefox, and Chrome.

Do you have any concerns?

uno.js:

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    if (navigator.appName=="Microsoft Internet Explorer") {
        script.onreadystatechange = function(){
            if (script.readyState == 'loaded') {
                document.getElementsByTagName('head')[0].appendChild(script);
                callback();
            }
        };
    } else {
        document.getElementsByTagName('head')[0].appendChild(script);
        script.onload = function(){
            callback();
        };
    }
}

loadScript('dos.js', function(){
    alert(outerVariable); // "Done!"
});

Answer 4

Up to now, this method appears to be the most effective. It has been tested on IE9, Firefox, and Chrome.

Do you have any concerns?

uno.js:

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    if (navigator.appName=="Microsoft Internet Explorer") {
        script.onreadystatechange = function(){
            if (script.readyState == 'loaded') {
                document.getElementsByTagName('head')[0].appendChild(script);
                callback();
            }
        };
    } else {
        document.getElementsByTagName('head')[0].appendChild(script);
        script.onload = function(){
            callback();
        };
    }
}

loadScript('dos.js', function(){
    alert(outerVariable); // "Done!"
});

Answer 5

Answer №3

Utilize the onload event handler in Internet Explorer versions 9 to 11, Chrome, and Firefox, or the onreadystatechange event handler in Internet Explorer versions 6 to 9.

var oScript = document.getElementById("script")
        oScript.src = "dos.js"
        if (oScript.onload !== undefined) {
            oScript.onload = function() {
                alert('load')
            }
        } else if (oScript.onreadystatechange !== undefined) {
            oScript.onreadystatechange = function() {
                alert('load2')
            }
        }

Answer 6

Utilize the onload event handler in Internet Explorer versions 9 to 11, Chrome, and Firefox, or the onreadystatechange event handler in Internet Explorer versions 6 to 9.

var oScript = document.getElementById("script")
        oScript.src = "dos.js"
        if (oScript.onload !== undefined) {
            oScript.onload = function() {
                alert('load')
            }
        } else if (oScript.onreadystatechange !== undefined) {
            oScript.onreadystatechange = function() {
                alert('load2')
            }
        }

Dynamically load scripts at runtime and verify their successful loading

Answer №1

Answer №2

Answer №3

Similar questions

Next.js | Error: Attempting to access a property of an undefined value (property name: 'secret')

What is the correct process for authenticating requests from SSR to the Feathers JS API?

Are you encountering difficulties while managing back pressure as anticipated when applying node request or axios in combination with streams for downloading and extracting files?

Using Node.js and Express to assign a JavaScript property to a variable

What could be causing the malfunction of useEffect() in my script?

What is the best way to show my button only when within a specific component?

What is the best way to implement date range filtering in vue js?

Using JavaScript to display dynamic data pulled from Django models

Issue with AngularJS script halting when reaching factory function that returns a promise

Utilizing React Views in an Express Environment

How come the hidden container does not reappear after I click on it?

How do I trigger a click event without actually selecting an option in selectpicker?

In JavaScript, what is the best way to target the initial option element in HTML?

Exploring the World of THREE.js: Particles and PointClouds

Having trouble with the Aurelia JSPM install -y command not functioning properly on Windows

Can you explain the purpose of the square brackets within the ".module("modulename", [...])" syntax used in AngularJS?

What is the best way to bring a "subdependency" into ES6?

Extract feedback (produced through javascript) utilizing RSelenium/XML

Having trouble with NVM not working correctly in Ubuntu 21.04 Terminal?

Setting the date in a datetimepicker using the model