各浏览器对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 :

各浏览器对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