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

作者：交互手记时间：2026-10-26 07:35:22浏览：458

本文对比分析了HTML中link标签的onload与onreadystatechange事件在不同浏览器中的支持情况。测试表明，IE6至IE9及Opera静态HTML中均支持onload，而Firefox、Safari和Chrome不支持。对于onreadystatechange，仅IE系列支持且会触发两次状态变化；Opera仅在动态创建link元素时支持该事件。通过JS动态创建link可触发Opera的onreadystatechange，为跨浏览器CSS加载检测提供了具体实现参考。

link标签onload事件在各浏览器中的支持情况

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：

link标签onload事件在各浏览器中的支持情况

IE8/9：

link标签onload事件在各浏览器中的支持情况

Opera：

link标签onload事件在各浏览器中的支持情况

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

link标签onreadystatechange事件的浏览器差异与动态创建测试

注：通过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中仍触发两次，Firefox/Safari/Chrome无反应。有趣的是Opera中触发了一次，表明Opera支持动态创建link元素时的onreadystatechange事件。