如何可靠地动态加载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');
});
Run Code Online (Sandbox Code Playgroud)
脚本元素有哪些可用事件?
我有一个JS函数,可能偶尔会在某些页面上使用.它依赖于另一个JS文件(swfObject.js),但我想避免必须在整个地方都包含这个文件,因为大多数情况下这都是浪费的请求.
相反,我想创建一个可以根据需要将脚本引用注入页面DOM的泛型函数,因此如果调用此函数,它将检查脚本,如果它不存在,则加载它.
我很确定这是可能的(我不打算使用document.write),但在我冒险进入未知领域之前,有没有人之前做过这个,如果有的话,还有什么指针?
编辑:好的,我试过了,它适用于IE6和FF,我还没有测试过其他浏览器.
这是我的代码(Rev 2.0,现在有可选的回调):
function loadJSInclude(scriptPath, callback)
{
var scriptNode = document.createElement('SCRIPT');
scriptNode.type = 'text/javascript';
scriptNode.src = scriptPath;
var headNode = document.getElementsByTagName('HEAD');
if (headNode[0] != null)
headNode[0].appendChild(scriptNode);
if (callback != null)
{
scriptNode.onreadystagechange = callback;
scriptNode.onload = callback;
}
}
Run Code Online (Sandbox Code Playgroud)
并在具有依赖性的方法中:
var callbackMethod = function ()
{
// Code to do after loading swfObject
}
// Include SWFObject if its needed
if (typeof(SWFObject) == 'undefined')
loadJSInclude('/js/swfObject.js', callbackMethod);
else
calbackMethod();
Run Code Online (Sandbox Code Playgroud)
有什么建议?