各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011-04-27 00:00
806 查看
1,onload事件
IE6/7 :
IE8/9 :
Opera :
即IE6/7/8/9/Opera都支持onload事件, Firefox/Safari/Chrome不支持。
注:用JS创建link标签再添加到head中,情况如上。
2,onreadystatechange事件
IE6/7/8/9中弹出了两次,其它浏览器均没有弹。说明只有IE支持link元素的onreadystatechange事件。弹出两次分别是readyState为loading,complete状态。可使用readyState来判断载入情况。我们再使用JS动态创建link元素试试,
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
<!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
相关文章推荐
- 各浏览器对link标签onload/onreadystatechange事件支持的差异分析
- 各浏览器对link标签onload/onreadystatechange事件支持的差异
- 仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
- 仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
- <script>标签的onload和onreadystatechange事件以及defer属性
- 比onload更快的DOMContentLoaded,readystatechange,doscroll的DOM加载事件
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
- requireJS&seaJS模块加载器原理:<script>标签加载外部js文件用到的onload、onerror和onreadystatechange事件
- document.onreadystatechange事件的用法分析
- 10、网页制作Dreamweaver(扩展:各浏览器对 onunload 事件的支持与触发条件实现有差异)
- onload, onpageshow 事件在不同浏览器中的表现
- 各浏览器对 onunload 事件的支持与触发条件实现有差异
- AjAx使用方法四步骤,创建,打开,发送,onreadystatechange
- React Native WebView 内点击事件获取onNavigationStateChange、onMessage
- onpopstate浏览器点击回退按钮时触发的事件
- 各浏览器对focusin/focusout事件的支持差异