动态脚本标签加载未按预期工作答案

【问题标题】：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 完全加载之前运行。任何想法为什么这不起作用？

【问题讨论】：

标签： javascript dojo google-closure google-closure-library

【解决方案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://stackoverflow.com/a/17226714/257319) 上查看为动态加载 Google-Closure-Library 提供的非常相似的解决方案示例

【讨论】：