0

就在前面：这个项目不使用 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.... 所以我的问题是：

  1. 动态加载的内容是否可以在执行时访问（需要发生魔法的地方）？或者直到 loadBigHairyCode() 返回并且浏览器经历某种刷新周期之后它们才变得“真实”？

  2. 如果是，那么我如何访问它们？某种 getGlobalVariableByName("string") 函数？

  3. 如果不是，那么... aieee。正常人是怎么做这种事的？

4

2 回答 2

4

你可以试试这个

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(){
    //....
}

更新： 您可以阅读此内容。

于 2012-12-11T20:44:37.520 回答
3

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

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

于 2012-12-11T20:42:59.220 回答