各浏览器对link标签onload/onreadystatechange事件支持的差异分析
更新时间：2011年04月27日 00:08:22 作者：
各浏览器对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>
<!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事件。
复制代码 代码如下:
<!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/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
相关文章
这篇文章主要介绍了MUI Scroll插件的使用详解,需要的朋友可以参考下2017-04-04
下面小编就为大家带来一篇js图片放大镜实例讲解(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家详细介绍了小程序实现购物车完整版，实现加减计算数量跟金额，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。2011-07-07
在Angular中，最好在一个顶级模块中加载和配置路由，它专注于路由功能，然后由根模块AppModule导入它，最后还有初始化并监听浏览器的地址变化2023-01-01
这篇文章主要介绍了微信小程序 调用微信授权窗口相关问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行，本文给大家2015-12-12
网站接入QQ登录，首先引入授权js文件，这个需要提交申请的，通过之后按照下面的步骤进行操作就可以了2014-07-07
本篇文章主要介绍了用JavaScript和jQuery实现瀑布流的方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
自定义指令是微信小程序中用于增强模板功能的重要工具,通过合理使用自定义指令,可以提高代码的可维护性和复用性,简化页面逻辑的编写和管理,这篇文章主要介绍了微信小程序自定义指令,需要的朋友可以参考下2024-07-07
最新评论