javascript - Dynamically inserted script tag is not executed in the correct order - Stack Overflow

admin管理员组

文章数量:1356922

Following is a snippet of my html code:

...

<script src=".../jquery.min.js"></script>

<script id="foo">
    if (!window.jQuery) {
        var jquery = document.createElement("script");
        jquery.src = ".../jquery.min.js";
        var self = document.getElementById("foo");
        self.parentNode.insertBefore(jquery, self.nextSibling);
        console.log("haha");
    }
</script>

<script>
    console.log("hehe");
</script>

<script src=".3.5/js/bootstrap.min.js"></script>

The first script tag is a jquery CDN. The purpose of the script tag with id "foo" is that in case the CDN fails, it loads a local copy of jquery file before the following bootstrap js file is loaded.

However, somehow the inserted jquery file is not executed before the bootstrap js file. I tried putting console.log("wow") in that local jquery file. The result in console is "haha", "hehe", some error message from bootstrap js file, "wow". Observing the DOM, the inserted jquery tag does appear before the "hehe" script, I am wondering why it's not executed in the right order and if there is a better way to achieve my goal?

Following is a snippet of my html code:

...

<script src=".../jquery.min.js"></script>

<script id="foo">
    if (!window.jQuery) {
        var jquery = document.createElement("script");
        jquery.src = ".../jquery.min.js";
        var self = document.getElementById("foo");
        self.parentNode.insertBefore(jquery, self.nextSibling);
        console.log("haha");
    }
</script>

<script>
    console.log("hehe");
</script>

<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>

The first script tag is a jquery CDN. The purpose of the script tag with id "foo" is that in case the CDN fails, it loads a local copy of jquery file before the following bootstrap js file is loaded.

However, somehow the inserted jquery file is not executed before the bootstrap js file. I tried putting console.log("wow") in that local jquery file. The result in console is "haha", "hehe", some error message from bootstrap js file, "wow". Observing the DOM, the inserted jquery tag does appear before the "hehe" script, I am wondering why it's not executed in the right order and if there is a better way to achieve my goal?

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 11, 2015 at 3:54 XufengXufeng 6,76299 gold badges2727 silver badges3434 bronze badges 1

• Shouldn't that be ../jquery.min.js instead of .../jquery.min.js – Guruprasad J Rao Commented Sep 11, 2015 at 3:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Dynamically inserted script files that are inserted with anything other than document.write() are not executed in ANY predictable order. They are async and will load and run at their own pace.

You cannot depend upon any load order of async scripts relative to other scripts unless you write code to monitor when things have finished loading and only run code when some specific conditions have been met.

If you insert the script with document.write(), then it will bee a blocking script load and it will load and run before any script tags parsed after the document.write() statement, the same as if the <script> tag was in the source of the page in that spot. But, using document.write() potentially messes with some browser loading optimizations so there can be some downsides to using that technique.

You can use document.write() in this way:

<script src=".../jquery.min.js"></script>

<script>
    if (!window.jQuery) {
        document.write('<scr' + 'ipt src="../jquery.min.js"></scr' + 'ipt>');
    }
</script>

A whole article on this topic: CDNs fail, but your scripts don't have to - fallback from CDN to local jQuery.

本文标签： javascriptDynamically inserted script tag is not executed in the correct orderStack Overflow