日期:2014-05-16 浏览次数:20395 次
动态加载javascript?很俗的一个题目,如果你已经知道如何动态加载外部javascript,那么你可以跳过这篇文章继续阅读其它的。如果你还不知道怎样动态加载外部javascript文件的话,请耐心的继续阅读。
什么时候会用到动态加载javascript文件的技术呢?其实很多的时候都有可以用到,比如从服务器端生成javascript脚本,但是用到动态加载javascript文件主要是因为前端和后端数据的交互(至少哥会在这个时候用到)。
前几天在修改移动版支付宝时,就使用了动态加载javascript文件。
记住,这里说的动态加载js文件是指利用js动态加载js文件,并非是服务器生成。
如何创建动态加载外部javascript的脚本呢?非常简单
var script = document.createElement('script');//创建script标签 script.src = 'http://mgw.alipay.com/choosePhone.htm?' + (new Date()).getTime().toString().substring(0,8); script.type = "text/javascript"; script.characterSet = 'utf-8'; script.onload = script.onreadystatechange = function(){//兼容IE和DOM标签的script onload事件 if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') { alert(malipayBrands.length); } }
?
请注意以上代码中的script.onload = script.onreadystatechange = function (){},其中onload用于DOM标签的浏览器,onreadystatechange用于IE。
最后在head中插入我们的script
document.getElementsByTagName('head')[0].appendChild(script);
?
?
在国外已经有一个封装好的loadScript.js,代码如下:
function loadScript(url, callback){ var f = arguments.callee; if (!("queue" in f)) f.queue = {}; var queue = f.queue; if (url in queue) { // script is already in the document if (callback) { if (queue[url]) // still loading queue[url].push(callback); else // loaded callback(); } return; } queue[url] = callback ? [callback] : []; var script = document.createElement("script"); script.type = "text/javascript"; script.onload = script.onreadystatechange = function(){ if (script.readyState && script.readyState != "loaded" && script.readyState != "complete") return; script.onreadystatechange = script.onload = null; while (queue[url].length) queue[url].shift()(); queue[url] = null; }; script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }?