动态插入的脚本标记未按正确的顺序执行 [英] Dynamically inserted script tag is not executed in the correct order

问题描述

以下是我的html代码片段：

  ... 
 
<脚本SRC = ... / jquery.min.js >< /脚本> 
 
< 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.com/bootstrap/3.3.5/js/bootstrap.min.js>< / script> 
  

第一个脚本标记是一个jQuery CDN。
标识为foo的脚本标签的用途是，如果CDN失败，它将在加载以下引导程序js文件之前加载jquery文件的本地副本。

然而，在引导js文件之前，插入的jquery文件不会被执行。我试着把 console.log（wow）放在本地的jquery文件中。在控制台中的结果是haha，hehe，来自引导js文件的一些错误消息，哇。观察DOM，插入的jquery标签确实出现在hehe脚本之前，我想知道为什么它没有以正确的顺序执行，以及是否有更好的方法来实现我的目标是什么？

解决方案

动态插入脚本文件，插入的内容不是 document.write（） 不会以任何可预测的顺序执行。它们是异步的，并将按照自己的步调加载和运行。

不能依赖异步脚本相对于其他脚本的任何加载顺序，除非您编写代码以监视何时加载完成并且只在某些特定条件已经运行时才运行代码如果你用 document.write（）插入脚本，它将成为一个阻塞脚本加载它将在任何脚本标记在 document.write（）语句之后解析之前加载并运行，就像< script> 标记位于该位置页面的源代码中。但是，使用 document.write（）可能会导致一些浏览器加载优化，所以使用该技术可能会有一些缺点。

您可以这样使用 document.write（）：

 < script src =... / jquery.min.js>< / script> 
 
< script> 
 if（！window.jQuery）{
 document.write（'< scr'+'ipt src =../ jquery.min.js>< / scr'+'ipt> ;'）; 
} 
< / script> 
  

关于此主题的整篇文章： CDN失败，但您的脚本无需 - 从CDN回退到本地jQuery 。

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.com/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?

解决方案

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 become 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.

这篇关于动态插入的脚本标记未按正确的顺序执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！