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

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

时间: 2025-01-30 08:13:45

各浏览器对link标签onload/onreadystatechange事件支持的差异分析_javascript技巧的相关文章

document.onreadystatechange事件的用法分析_javascript技巧

这两天,正在给部门的一个项目做优化,其中一项是将web应用中的所有alert用div方式实现,javascript的相关方法都写好了,方法名为showDialog,前台页面调用showDialog方法一点也没有问题,可是页面一旦提交,从后台输出脚本,调用showDialog方法,就会时不时的出现问题了,报一个无法打开Internet站点的错误,在脚本中下断点调试,依然找不到问题的根源,最后到网上一查,这个问题有可能是页面没有完全加载造成的,于是乎,修改后台输出脚本的代码,将其改为 documen

firefox下对ajax的onreadystatechange的支持情况分析_javascript技巧

一.问题: 复制代码 代码如下: var xmlHttp; function savecarttodata(){ createXMLHttpRequest(); var rndcode = new Date().getTime(); var CartUrl ="a.asp?cache="+rndcode xmlHttp.onreadystatechange = function(){ ..... } xmlHttp.open ("GET",CartUrl,true)

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级_javascript技巧

假设在我们页面有这么一段标签: 复制代码 代码如下: <body> <div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div> </body> 现在在页面加入这么一段脚本: 复制代码 代码如下: <script type="text/javascript"> window.onload=fun

JavaScript与Image加载事件(onload)、加载状态(complete)_javascript技巧

昨天用jQuery插件aeImageResize,发现它更有优势:每张图片加载完后,会马上进行等比缩放. 这归于图片对象Image的加载事件onload的功劳. 查看插件的源码,发现它也依赖图片对象的complete属性和onload事件,并且特别把IE6区分对待,到底IE6在图片加载对象上,与其它浏览器有什么不同呢? 看下文: 通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识. 看个例子: 复制代码 代码如下: <input type=&qu

Js 冒泡事件阻止实现代码_javascript技巧

1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码: 复制代码 代码如下: $(document).ready(function(

js之事件冒泡和事件捕获详细介绍_javascript技巧

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发.   IE 5.5: div -> body -> document   IE 6.0: div -> body -> html -> document   Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(documen

javascript移动设备Web开发中对touch事件的封装实例_javascript技巧

在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现. zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. t

IE6下通过a标签点击切换图片的问题_javascript技巧

不过, 国内大部分用户还是在用IE6. IE6下通过a标签的onclick事件切换某个图片时, 有可能出现图片无法加载问题, httpwatch抓取表现结果是abort. 测试了一下,找到了解决办法. a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样: 1. <a href="javascript://" onclick="dosomething()">a1</a> 2. <a href="javascript

js中的eventType事件及其浏览器支持性介绍_javascript技巧

一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3