Question

就在前面：这个项目不使用JQuery。

我们有一些第三方JavaScript;它很大而且毛茸茸而且不需要经常使用，因此我们只在需要时动态加载它：

function loadBigHairyCode()
{
    var file = document.createElement('script')
    file.setAttribute("type","text/javascript")
    file.setAttribute("src","path/to/big/ugly/script/file.js")
    document.getElementsByTagName("head")[0].appendChild(file)

    magic_needs_to_happen_here
}

脚本加载工作正常，包括一些未在此处显示的相应CSS。

加载的文件定义了一个构造函数（称之为UglyGlobalFunc），我们在其他地方以通常的方式使用它（var foo = new UglyGlobalFunc(....)）。问题是，因为该文件的其余部分有点难看，我们需要将其修复一点，以免吸收更少。具体来说，在我上面显示“魔法需要发生在这里”的地方，我想写相当于

UglyGlobalFunc.prototype.BodgeBodgeBodge = function() {....}

就像我在编辑底层文件一样。

但是失败了，因为在代码中的那一点，UglyGlobalFunc是未定义的，这是有道理的。对于像window.UglyGlobalFunc.proto...这样的简单间接级别也是如此。所以我的问题是：

动态加载的内容是否可以在执行点（魔法需要发生的地方）访问？或者，在loadBigHairyCode（）返回并且浏览器经历某种刷新周期后，它们才变得“真实”？
如果是，那我该如何访问它们？某种getGlobalVariableByName（“string”）函数？
如果没有，那么... aieee。正常理智的人如何去做那种事情？

Answer 1

你可以试试这个

function loadBigHairyCode()
{
    var file = document.createElement('script')
    file.onreadystatechange= function () { // works in IE
        if (this.readyState == 'complete') MyFunc();
    }
    file.onload= MyFunc;
    file.type="text/javascript";
    file.src="path/to/big/ugly/script/file.js";
    document.getElementsByTagName("head")[0].appendChild(file)
}

function MyFunc(){
    //....
}

更新： You may read this。

Answer 2

当您创建这样的<script>元素时，您必须绑定到其onload事件，该事件在加载并可供使用后立即触发。

另一个选择是只使用document.write('<script src="..."></script>');同步加载它。然后您可以在以下行中使用它。只需确保在页面完成加载之前执行，否则您的整个文档将被覆盖。

动态加载脚本后访问变量

2 个答案: