img.onload与script.onload实现的不一样写法

在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";

相关文章
相关标签/搜索