script加载
IE的script 元素只支持onreadystatechange事件,不支持onload事件。
FireFox,Opera, Chorme, IE11+ 和Safari3+的script 元素不支持onreadystatechange事件,只支持onload事件。
如果要在一个<script src="xx.js"> 加载完成执行一个操作,FF使用onload事件就行了,IE下则要结合onreadystatechange事件和this.readyState
以下是IE的一个例子:
<script type="text/javascript" src="xx.xx" onreadstatechange="if(this.readyState=='load') alert('loaded');"></script>
this.readyState的值为'loaded'或者'complete'都可以表示这个script已经加载完成.
【Firefox, Opera, Chorme, IE11+ 和Safari3+会在<script>节点接收完成之后发出一个load 事件。你可以监听这一事件,以得到脚本准备好的通知】
【Internet Explorer(IE10及以下版本)支持另一种实现方式,它发出一个readystatechange事件。<script>元素有一个readyState属性,它的值随着下载外部文件的过程而改变。readyState 有五种取值】
微软文档上说,在<script>元素的生命周期中,readyState 的这些取值不一定全部出现,但并没有指出哪些取值总会被用到。实践中,我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个readyState值所表示的最终状态并不一致,有时<script>元素会得到“loaded”却从不出现“complete”,但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在readystatechange 事件中检查这两种状态,并且当其中一种状态出现时,删除readystatechange事件句柄(保证事件不会被处理两次)
var script = document.createElement("script")
script.type = "text/javascript";
//Internet Explorer
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded.");
}
};
script.src = "file1.js";
document.getElementsByTagName_r("head")[0].appendChild(script);
|
如何结合IE和FF等的区别?参考一下jquery的源码:
var script = document.createElement('script');
script.src="xx.js";
script.onload = script.onreadystatechange = function(){
if( ! this.readyState //这是FF的判断语句,因为ff下没有readyState这个值,IE的readyState肯定有值
|| this.readyState=='loaded' || this.readyState=='complete' // 这是IE的判断语句
){
alert('loaded');
}
};
|
上面是根据dom加载完去判断,如果根据dom未加载完去判断如下:
var script = document.createElement('script');
script.src="xx.js";
script.onload = script.onreadystatechange = function(){
if( this.readyState && this.readyState=='loading' ){
return
}
alert('loaded')
};
|
大多数情况下,你希望调用一个函数就可以实现JavaScript 文件的动态加载。下面的函数封装了标准实现和IE 实现所需的功能:
function loadScript(url, callback){ var script = document.createElement ("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; // 同时检查两种状态,只要有一种触发就删除事件处理器,避免触发两次 callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName_r("head")[0].appendChild(script); } |
以下 HTML 标签支持 onload :
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>(仅IE), <script>, <style>