动态加载 JavaScript 文件

小编典典

动态加载 JavaScript 文件

all

如何可靠地动态加载 JavaScript 文件？这可用于实现一个模块或组件，当“初始化”时，该组件将按需动态加载所有需要的 JavaScript 库脚本。

使用该组件的客户端不需要加载<script>实现该组件的所有库脚本文件（并手动将标签插入其网页） - 只需“主”组件脚本文件。

主流 JavaScript 库是如何做到这一点的（Prototype、jQuery 等）？ 这些工具是否将多个 JavaScript
文件合并到一个脚本文件的一个可再分发的“构建”版本中？或者他们是否对辅助“库”脚本进行任何动态加载？

这个问题的补充： 在加载动态包含的 JavaScript 文件后，有没有办法处理事件？
原型具有document.observe文档范围的事件。例子：

document.observe("dom:loaded", function() {
  // initially hide all containers for tab content
  $$('div.tabcontent').invoke('hide');
});

脚本元素有哪些可用事件？

阅读 77

2022-07-28

共1个答案

小编典典

您可以使用Prototypes动态创建脚本元素：

new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"});

这里的问题是我们不知道外部脚本文件何时完全加载。

我们经常希望我们的依赖代码在下一行，并且喜欢编写如下内容：

if (iNeedSomeMore) {
    Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod();
    myFancyMethod(); // cool, no need for callbacks!
}

有一种无需回调即可注入脚本依赖项的聪明方法。您只需通过 同步 AJAX 请求 提取脚本并在全局级别评估脚本。

如果您使用 Prototype，则 Script.load 方法如下所示：

var Script = {
    _loadedScripts: [],
    include: function(script) {
        // include script only once
        if (this._loadedScripts.include(script)) {
            return false;
        }
        // request file synchronous
        var code = new Ajax.Request(script, {
            asynchronous: false,
            method: "GET",
            evalJS: false,
            evalJSON: false
        }).transport.responseText;
        // eval code on global level
        if (Prototype.Browser.IE) {
            window.execScript(code);
        } else if (Prototype.Browser.WebKit) {
            $$("head").first().insert(Object.extend(
                new Element("script", {
                    type: "text/javascript"
                }), {
                    text: code
                }
            ));
        } else {
            window.eval(code);
        }
        // remember included script
        this._loadedScripts.push(script);
    }
};

2022-07-28