位置:海鸟网 > IT > JavaScript >

各浏览器对link标签onload/onreadystatechange事件的支持情况

1,onload事件

 <!DOCTYPE

01 <!DOCTYPE HTML>

02 <HTML>

03  <HEAD>

04     <meta charset="utf-8" />

05     <title>Link Element onreadystatechange</title>

06     <link type="text/css" rel="stylesheet" href="webface/login/css/login101021_min.css" onreadystatechange="alert(this)"/>

07  </HEAD>

08  <BODY>

09  </BODY>

10 </HTML>

IE6/7/8/9中弹出了两次,其它浏览器均没有弹。说明只有IE支持link元素的onreadystatechange事件。弹出两次分别是readyState为loading,complete状态。可使用readyState来判断载入情况。我们再使用JS动态创建link元素试试, 

<!DOCTYPE HTML> 

 <HTML> 

  <HEAD> 

     <meta charset="utf-8" /> 

     <title>Link Element onreadystatechange</title> 

 </HEAD> 

  <BODY> 

     <script> 

        function createEl(type, attrs){ 
             var el = document.createElement(type), 

                 attr; 

             for(attr in attrs){ 

                 if(attrs.hasOwnProperty(attr)){ 
                   el.setAttribute(attr, attrs[attr]); 

                 } 

             } 

            return el; 
         } 

         var link = createEl('link', { 

             href : 'http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css', 

            rel  : 'stylesheet', 

             type : 'text/css' 

        }); 

        link.onreadystatechange = function(){ 

             alert(this) 

         } 

         document.getElementsByTagName('head')[0].appendChild(link); 

     </script> 

 </BODY> 
</HTML>

IE6/7/8/9中仍然弹出了2次。Firefox/Safari/Chrome仍然没弹。貌似一切正常,但神奇的是这次在Opera中弹出了一次,说明Opera支持动态创建link元素时的onreadystatechange事件。