各浏览器对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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
Node学习记录之cluster模块
May 31 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
layui动态表头的实现代码
Aug 22 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
仅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
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
js仿360开机效果
2019/12/26 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
辩论赛主持词
2014/03/18 职场文书
生产操作工岗位职责
2014/09/16 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang