关于link和script标签的onload与onreadystatechange事件的支持

研究编写这个专题的心思来源于阳哥分享的javascript加载总结的调研文档。

 

当然这个话题很火也很深，路也很长，开启这个话题，简单地普及一些知识。

 

简单记录，学习一下。

 

开始要说的可能就是onload与onreadystatechange的api支持

 

其实简单地去理解的话，对于外部资源的应用有两个我们head里面常用的标签link和script

 

测试浏览器版本说明

•  Opera  11.51
•  Chrome 6.0.401.1
•  FF 3.6.23

a.  link标签

•  link标签的静态支持

    ------个人定义的所谓静态其实就是

<link type="text/css" rel="stylesheet" href="****" />

 

 

    1. IE 6/7/8/9多支持onload，

        Opera支持onload

        对于onreadystatechange事件，有两个状态readyState（loading,complete）

 

    2. FF/Safari/Chrome不支持onload,

        也不支持onreadystatechange

 

 

• link标签的动态支持

    ------个人定义的所谓动态是js去创建link标签

<script type="text/javascript">
   /*封装代码
   *创建给定属性的html元素
   *@param type ----创建元素的类型
   *@param attrs ----属性集合
   *@return elment -------带有给定属性的元素对象
   */
    function createTag(type,attrs){
         var element = document.createElement(type),
               item ;
         for(item in attrs){
             //加上一层本地属性的判断
             if(attrs.hasOwnProperty(item)){
                 element.setAttribute(item,attrs[item]);
            }
        }
        return element;
   }

   var link = createTag('link',{
         type : "text/css",
         rel    : "stylesheet",
         href  : "***"
    });
   link.onreadystatechange = function(){
           //执行代码
   }

   link.onload = function(){//执行代码}
   document.getElementsByTagName('head')[0].appendChild(link);
</script>

  1.  IE 6/7/8/9支持onload和onreadystatechange

  2.  Opera也支持

  3.  FF/Chrome/Safai 不支持

b.  script标签

  

•   script的静态支持

  -----所谓的静态就是

<script type="text/javascript" src="**"></script>

 1.  IE 6/7/8触发onreadystatechange

 2.  IE 9 先触发onreadystatechange 后触发onload

 3.  FF/Safari/Chrome/Opera 触发onload

•  script的动态支持

ie下的预加载

window.onload = function(){
      var script = document.createElement("script");
      script.setAttribute("type","text/javascript");
      script.onreadystatechange = function(){
          if(this.readyState == 'loaded'){
                   alert("preload");
                   document.getElementsByTagName("head")[0].appendChild(script);
           }else if(this.readyState == "complete"){
               this.onreadystatechange = null;
       }
     }
    script.src="****jquery.min.js?_="+(new Date()).getTime();
}

 

  

 

 

评论

3 楼 zhuzhuaijq 2014-02-24  

   

2 楼 zhangyaochun 2011-10-18  

Hafeyang 写道

恩。不错。

感谢来访博客，多多提意见，谢谢

1 楼 Hafeyang 2011-10-17  

恩。不错。