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

最新推荐文章于 2021-12-30 21:31:42 发布

最新推荐文章于 2021-12-30 21:31:42 发布 · 1k 阅读

文章标签：

#link #script #加载顺序

js-加载专栏收录该内容

3 篇文章

订阅专栏

本文探讨了不同浏览器下JavaScript中link及script标签加载外部资源时的行为差异，包括对onload与onreadystatechange事件的支持情况，并提供了IE与非IE浏览器的兼容性解决方案。

研究编写这个专题的心思来源于阳哥分享的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();
}