如何可靠且动态地加载 JavaScript 文件?这可用于实现一个模块或组件,当“初始化”时,该组件将按需动态加载所有需要的 JavaScript 库脚本。
使用该组件的客户端不需要加载所有实现该组件的库脚本文件(并手动将<script>
标签插入到他们的网页中)——只需“主”组件脚本文件。
主流 JavaScript 库如何实现这一点(Prototype、jQuery 等)?这些工具是否将多个 JavaScript 文件合并为一个可再分发的“构建”版本的脚本文件?或者他们会动态加载辅助“库”脚本吗?
对这个问题的补充:有没有办法在加载动态包含的 JavaScript 文件后处理事件?原型(prototype)有 document.observe
用于文档范围的事件。示例:
document.observe("dom:loaded", function() {
// initially hide all containers for tab content
$$('div.tabcontent').invoke('hide');
});
脚本元素有哪些可用事件?
最佳答案
您可以使用 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!
}
有一种无需回调即可注入(inject)脚本依赖项的聪明方法。您只需通过同步 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);
}
};
关于javascript - 动态加载 JavaScript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21294/