zoukankan      html  css  js  c++  java
  • 各浏览器对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>
    

    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

  • 相关阅读:
    Sublime Text 3——插件配置篇
    Sublime Text 3——基本介绍篇
    线性同余方程
    费马小定理
    一点心事
    寒诗
    e网通学习笔记
    std::cout<<"Goodbye 2019"<<" "<<"Hello 2020"<<' ';
    新砍
    NOIP2019游记
  • 原文地址:https://www.cnblogs.com/snandy/p/2029124.html
Copyright © 2011-2022 走看看