Loading external script after a page has loaded

Question

If I include this script tag in the header or the body of an HTML document, then the external script it points to will be executed:

<script type="text/javascript" src="http://www.example.com/script.js"></script>

If I add that same script tag to the page AFTER it has finished loading, either by using another script in the page or by running a javascript: URI, the external script will not load.

This is an HTML document that tries to do what I'm talking about:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function f () {
                var s;

                s = document.createElement("script");
                s.setAttribute("type", "text/javascript");
                s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
                document.body.appendChild(s);
                alert(typeof $);
            }
        </script>
    </head>
    <body onload="f();">
    </body>
</html>

If you open this document in a web browser, the JavaScript pop-up dialogue will say "undefined" instead of "object". If it said "object", then that would mean that the jQuery code had been loaded.

Another case would be a bookmarklet that requires JavaScript code that is not used by the page it is run on. For example, if a bookmarklet needs jQuery and the page that it is run on does not use jQuery, it might do this:

s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
document.body.appendChild(s);

The above code does not result in jQuery being loaded.

What can I do to load a script after an HTML page has loaded? I do not want to use any JavaScript libraries because that would require the library code to have already been loaded by the page.

This is a misunderstanding of asynchronous operation. You want to believe the script is loaded an available immediately after setting the `src` attribute of your new script tag....it isn't. It takes time to load, hence async. You must wait for the script file to load prior to testing for its availability. — Randy Casburn, May 21 '19 at 21:10
Possible duplicate of [document.createElement("script") synchronously](https://stackoverflow.com/questions/3248384/document-createelementscript-synchronously) — Aprillion, May 21 '19 at 21:10
If the script contains code to the effect of `window.addEventListener('load', doSomething, false);` and then you load it and append it to the page, doSomething wont happen, since the event its waiting for happened ages ago. What you can do is wait for the `load` event of the ` — enhzflep, May 21 '19 at 21:15
if you only need to be sure that jquery will be loaded after the page is rendered so put the script that load jquery (just giving the src) after the body — GJCode, May 21 '19 at 21:20

score 0 · Answer 1 · answered May 21 '19 at 21:22

0

Appending scripts with javascript loads them asynchronously. Add an onload handler to execute what code you want

    <script type="text/javascript">
        function f () {
            var s;

            s = document.createElement("script");
            s.setAttribute("type", "text/javascript");
            s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
            document.body.appendChild(s);
            s.onload=function(){alert(typeof $)};
        }
    </script>

answered May 21 '19 at 21:22

SoWhat

5,564
2
28
59

or you can just move the script tag to the end of body – SoWhat May 21 '19 at 21:23
This is not for my webpages. It's for webpages I do not control. This script would be loaded by code that ua not initiated by the page loading process. – Melab May 22 '19 at 14:55
You would have to implement the onload handler along with the script tag on pages where this had to be inserted. – SoWhat May 22 '19 at 15:07

score 0 · Answer 2 · answered May 21 '19 at 21:22

What can I do to load a script after an HTML page has loaded?

Put

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js">

after the closing of the body. An html page is rendered from top to bottom so only when the body has been loaded the browser will download the script (if not already in cache). In this way you can put another script after this to console log typedef if your really need it

Loading external script after a page has loaded

2 Answers2