无法从动态加载的 javascript 访问变量答案

【问题标题】：Can't access variables from dynamically loaded javascript无法从动态加载的 javascript 访问变量
【发布时间】：2011-02-13 18:46:57
【问题描述】：

我正在使用一个相当简单的系统来动态加载 javascript：

include = function (url) {
  var e = document.createElement("script");
  e.src = url;
  e.type="text/javascript";
  document.getElementsByTagName("head")[0].appendChild(e);
};

假设我有一个文件 test.js，其中包含以下内容：

var foo = 4;

现在，在我的原始脚本中，我想使用

include(test.js);
console.log(foo);

但是，我收到一个“未定义 foo”错误。我猜这与作为<head> 标签的最后一个子元素包含的动态脚本有关。我怎样才能让它工作？

【问题讨论】：

标签： javascript dynamic variables loading

【解决方案1】：

这是因为您必须等待脚本加载。它不像你想象的那样同步。这可能对你有用：

include = function (url, fn) {
    var e = document.createElement("script");
    e.onload = fn;
    e.src = url;
    e.async=true;
    document.getElementsByTagName("head")[0].appendChild(e);
};

include("test.js",function(){
    console.log(foo);
});

【讨论】：

不错的简单脚本。但是我们如何将失败事件（如连接未建立或 404 等）合并到此..

【解决方案2】：

这是一个问题，但浏览器下载和解析远程 JS 文件也需要时间——在你调用 console.log 之前它还没有这样做。

您需要延迟处理，直到脚本加载完毕。

最简单的方法是让库来完成繁重的工作，jQuery 有一个 getScript 方法，可以让您在脚本加载时传递回调以运行。

【讨论】：