在http://www.cnblogs.com/outside/p/3714482.html中,如何使用img.onload已经很清楚,当使用一样的方法建立script就有问题了html
var script = document.createElement("script");
script.src = "js/jquery.js";jquery
script.onload = function(){console.log("script")};app
这样写的话,本觉得能像img同样,控制台输出script,但在firfox,ie(本次测试只在firfox,ie中测试)中均没有输出。dom
在网上搜索了一下,大概说ie使用的是onreadystatechange事件来监听资源下载状态的改变控制输出,firfox使用onload事件控制资源下载完成后输出。ide
如下代码在ie中起做用测试
var script = document.createElement("script");
script.src = "js/jquery.js";
script.onreadystatechange = function(){
if(this.readyState === "loaded" || this.readyState === "complete"){//ie7,8只认识complete
alert("ie");
}
}this
当onreadystatechange换成script.onload = function(){console.log("script")};来测试,却没有输出,最后经过调试,发如今firfox中须要将script标签添加到dom中去才能触发事件(也即添加到dom中去才开始下载),这点跟ie不一样(ie跟script添加src就开始下载资源了)。url
最后在网上找了两段兼容代码,代码以下调试
第一:htm
var url = "js/jquery.js";
var script = document.createElement("script");
if(script.addEventListener){
script.addEventListener("load", callback, false);
}else if(script.attachEvent){
script.attachEvent("onreadystatechange", function(){
var target = window.event.srcElement;
if(target.readyState == "loaded" || target.readyState == "complete"){
callback.call(target);
}
});
}
document.getElementsByTagName("head")[0].appendChild(script);
function callback(){
console.log("兼容")
}
script.src=url;
第二:
var script = document.createElement("script");
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
func();
script.onload = script.onreadystatechange = null;
}
};
document.getElementsByTagName("head")[0].appendChild(script);
function func(){
console.log("兼容")
}
script.src = "js/jquery.js";