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

时间：2011-04-26 来源：snandy

1，onload事件

<!DOCTYPE HTML>
<HTML>
 <HEAD>
        <meta charset="utf-8" />
        <title>Link Element onload</title>
        <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onload="alert(this)"/>
 </HEAD>
 <BODY>
 </BODY>
</HTML>

IE6/7 :

IE8/9 :

Opera :

即IE6/7/8/9/Opera都支持onload事件， Firefox/Safari/Chrome不支持。

注：用JS创建link标签再添加到head中，情况如上。

2，onreadystatechange事件

<!DOCTYPE HTML>
<HTML>
 <HEAD>
        <meta charset="utf-8" />
        <title>Link Element onreadystatechange</title>
        <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onreadystatechange="alert(this)"/>
 </HEAD>
 <BODY>
 </BODY>
</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事件。