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

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事件。相关： https://developer.mozilla.org/en/HTML/Element/linkhttp://msdn.microsoft.com/en-us/library/ms535848%28v=VS.85%29.aspxhttp://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-35143001

　　推荐阅读

　　jQuery判断元素是否是隐藏的代码

核心代码:复制代码代码如下: if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <>>>详细阅读

本文标题：各浏览器对link标签onload/onreadystatechange事件支持的差异分析

地址：http://www.17bianji.com/kaifa2/JS/24636.html

1/2 1