javascript - 全局变量在脚本标记中的外部 .js 文件后不起作用

Question

这是我的 JavaScript 代码:

<script type="text/javascript">
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "//mysite.co/js.js";
document.body.appendChild(js);

alert(x);

</script>

在 mysitecom/js.js 文件中是这样的

var x = '1233123';
//some code

问题是警报不起作用。在谷歌浏览器的控制台中显示

Uncaught ReferenceError: x is not defined mypage:31 (anonymous function)

但是如果我包含这样的外部js文件；

<script src="//mysite.co/js.js" type="text/javascript" ></script>

它有效。

但我需要第一种方法...

解决办法是什么？

谢谢。

Answer 1

当您将脚本标签附加到正文时，它们会尽可能加载，而不是按顺序加载。这就是为什么您要在文档加载完成时添加监听器。例如，经典的 jquery 案例 -

$.ready(function () {
    alert(x);
});

这应该可以工作，因为此时脚本标记已加载，并且 x 已定义。此外，由于您已经以编程方式添加了脚本标记，因此浏览器将继续执行警告 x 的脚本 block ，而不是等待引用的脚本加载。

编辑 - Javascript - How to detect if document has loaded (IE 7/Firefox 3) 中提到了执行此操作的非 jquery 方法。

每@nrabinowitz - http://jsfiddle.net/7br7q/应该表明 .ready 确实会考虑动态添加的脚本。