手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >各浏览器对link标签onload/onreadystatechange事件支持的差异分析
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
摘要:1,onload事件复制代码代码如下:LinkElementonloadIE6/7:IE8/9:Opera:即IE6/7/8/9/Opera...

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

IE8/9 :

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

Opera :

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

即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事件支持的差异分析】相关文章:

使用RequireJS优化JavaScript引用代码的方法

js+HTML5基于过滤器从摄像头中捕获视频的方法

文本加密解密

js+html5实现canvas绘制圆形图案的方法

javascript事件冒泡实例分析

window.onload与$(document).ready()的区别分析

Java数据类型以及变量的定义

JavaScript中的substr()方法使用详解

JavaScript事件委托实例分析

JS或jQuery获取ASP.NET服务器控件ID的方法

精品推荐
分类导航