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


Posted in Javascript onApril 27, 2011

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/onreadystatechange事件支持的差异分析

IE8/9 :

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

Opera :

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

即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

Javascript 相关文章推荐
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
Node.js学习入门
Jan 03 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 #Javascript
js实时监听文本框状态的方法
Apr 26 #Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 #Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 #Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 #Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 #Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 #Javascript
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Django视图、传参和forms验证操作
2020/07/15 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
医生自荐信
2013/10/11 职场文书
行政助理求职自荐信
2013/10/26 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
关爱残疾人标语
2014/06/25 职场文书
单位证明范文
2015/06/18 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL