2014年4月20日
动态加载js文件,并在加载成功后执行回调函数
有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中保存了json数据之类的)。要实现这样的功能,可以使用<script>
元素的load
事件(IE9+、chrome、FireFox等)和onreadystatechange
事件(IE8以下),直接上代码:
function loadScript(src, callback) { var script = document.createElement('script'), head = document.getElementsByTagName('head')[0]; script.type = 'text/javascript'; script.charset = 'UTF-8'; script.src = src; if (script.addEventListener) { script.addEventListener('load', function () { callback(); }, false); } else if (script.attachEvent) { script.attachEvent('onreadystatechange', function () { var target = window.event.srcElement; if (target.readyState == 'loaded') { callback(); } }); } head.appendChild(script); }
使用方法如下:
loadScript('http://cdn.staticfile.org/jquery/1.6.2/jquery.min.js',function(){ console.log('onload'); });
onreadystatechange事件
onreadystatechange事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中,当的该对象的 load state 改变时,会触发此事件。
onreadystatechange 事件是微软对 IE 浏览器的私有事件扩充,所有元素都存在 onreadystatechange 事件。
下列元素对象总可以触发此事件,因为他们均会加载数据:APPLET,DOCUMENT,FRAME,FRAMESET,IFRAME,IMG,LINK,OBJECT,SCRIPT 和 XML 元素。
其他元素对象仅当 DHTML Behavior 被追加后会触发 onreadystatechange 事件。
但是实际上IE下image是支持onload事件的,可以查看我之前的一篇文章:带进度条的图片预加载效果。
参考:http://www.w3help.org/zh-cn/causes/BX9021
标签:JavaScript