各浏览器对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=></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=></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/link
http://msdn.microsoft.com/en-us/library/ms535848%28v=VS.85%29.aspx
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-35143001
上一个：JavaScript中获取未知对象属性的代码
下一个：jqgrid 简单学习笔记
更多图片编程知识: