动态脚本标签加载未按预期工作
Posted
技术标签:
【中文标题】动态脚本标签加载未按预期工作【英文标题】：dynamic script tag loading is not working as expected 【发布时间】：2009-12-19 23:34:28 【问题描述】：我们有一个同时使用 google 闭包和 dojo 库的应用程序。我们的索引页面中有以下内容，可以按预期工作：
<script type="text/javascript" src="runtime/src/lib/google-closure-rev26/closure/goog/base.js"></script>
<script type="text/javascript" src="runtime/src/lib/dojo_release_132_src/dojo/dojo.js"></script>
<script type="text/javascript" src="runtime/src/core/loader.js"></script>
我们希望在实际的 html 源代码中只使用一个 script 标签。所以我们尝试做以下事情：
<head>
<script type="text/javascript" src="runtime/src-bootstrap.js"></script>
</head>
然后在 src-bootstrap.js 中：
var head = document.getElementsByTagName("head")[0];
var s1 = document.createElement("script");
s1.type = "text/javascript";
s1.src = "runtime/src/lib/google-closure-rev26/closure/goog/base.js";
var s2 = document.createElement("script");
s2.type = "text/javascript";
s2.src = "runtime/src/lib/dojo_release_132_src/dojo/dojo.js";
var s3 = document.createElement("script");
s3.type = "text/javascript";
s3.src = "runtime/src/core/loader.js";
head.appendChild(s1);
head.appendChild(s2);
head.appendChild(s3);
但是，这在 FF 中不起作用。 core/loader.js 在 dojo 完全加载之前运行。任何想法为什么这不起作用？
【问题讨论】：
【参考方案1】：对于这种类型的机制，您最好使用 document.write() 来包含您的脚本。您当前使用的技术适用于延迟加载脚本，它会异步下载和执行脚本：http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/
...或者您可以有一个实际连接这些文件的构建过程，并且只请求一个脚本，这也将节省请求数量，因为您实际所做的是增加了请求数量。
【讨论】：
【参考方案2】：我的猜测是，因为您是通过 DOM 创建元素，而不是将它们作为标记，所以浏览器不会等待一个脚本完成后再执行下一个脚本（就像直接的情况一样<script></script><script></script>setup）。
如何以级联形式附加脚本（Google 闭包在其末尾附加 s2，Dojo s3），或者如 Lee Kowalkowski 建议的那样，使用 document.write() 编写 <script> 命令？
【讨论】：
【参考方案3】：一般来说 - 在窗口下添加命名空间，并编辑您的外部资源-
在本地保留一个action.js 或main.js 文件，这将被添加一个方法，最好是在全局范围内（意思是在window..下）。
编辑您的外部资源，在末尾添加 1 行，调用 action.js 或 main.js 上的方法，当加载完成时，“回调样”将执行您的方法'之前一直在添加到 DOM。它的工作原理非常类似于 JSONProtocol。
即使使用最复杂的动态加载资源组合，它也能创造奇迹。
在another thread (https://***.com/a/17226714/257319) 上查看为动态加载 Google-Closure-Library 提供的非常相似的解决方案示例
【讨论】：
以上是关于动态脚本标签加载未按预期工作的主要内容，如果未能解决你的问题，请参考以下文章