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

最新推荐文章于 2021-06-04 15:06:43 发布
最新推荐文章于 2021-06-04 15:06:43 发布
阅读量126 收藏
点赞数

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" οnlοad="alert(this)"/>
 </HEAD>
 <BODY>
 </BODY>
</HTML>

IE6/7 :

2011042611431375.png

IE8/9 :

2011042611433320.png

Opera :

2011042611435180.png

即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

weixin_33814685
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
09-05
- 其他浏览器，包括Firefox、Safari、Chrome和Opera（动态创建link元素的情况除外），都不支持link标签的onreadystatechange事件，因此在这些浏览器中，该事件不会被触发。 值得注意的是，当使用JavaScript动态...
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
10-28
测试结果可以看出，IE9后已经开始支持script的onload事件了。一直以来我们判断js文件是否已经加载完成就是用以上的两个事件。
window.onload，<body onload="function()">, document.onreadystatechange, httpRequest.onreadystatechang...
apple01010105的博客
08-06 195
部分内容参考：http://www.aspbc.com/tech/showtech.asp?id=1256 在开发的过程中，经常使用window.onload和body onload两种，很少使用document.onreadystatechange，但这次写了一个js，使用window.onload和body.onload都实现不了，最后使用document....
Ajax 两种请求方式的区别onload和onreadystatechange
狂奔的黑驴
06-05 8230
一. onreadystatechange 1. XMLHttpRequest对象有一个属性readyState，将其(xhr.readyState)打印后发现。进入onreadystatechange请求方式中时，可以打印其状态为2，状态为3，状态为4。 <button id="btn">请求纯文本</button> <script> let btn = document.getElementById('btn'); .
解决在火狐中不支持onreadystatechange的方法
weixin_30457065的博客
07-17 139
用window.addEventListener来对FF进行控制，如举个例子在IE下onreadystatechange可以监听事件，但在FF下不支持onreadystatechange，解决方法是做个判断，FF下就用window.addEventListener来监听事件，IE下就用onreadystatechange就可以了，代码例子如下： public static string ...
js onreadystatechange (转)
a1013774673的博客
08-22 383
标准参考无。问题描述onreadystatechange 事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中，当的该对象的 load state 改变时，会触发此事件。但在 IE 中 onreadystatechange 事件是其私有实现的，用于数据加载的 IMG、SCRIPT 和 LINK 标记，常常被误用 onreadystatechange 事件而导致在非 I...
关于link和script标签的onload与onreadystatechange事件的支持
Focus-Fe
10-17 888
研究编写这个专题的心思来源于阳哥分享的javascript加载总结的调研文档。   当然这个话题很火也很深，路也很长，开启这个话题，简单地普及一些知识。   简单记录，学习一下。   开始要说的可能就是onload与onreadystatechange的api支持   其实简单地去理解的话，对于外部资源的应用有两个我们head里面常用的标签link和script   测试浏览器...
img onload事件绑定各浏览器均可执行
09-05
本文主要探讨的是在不同浏览器环境下，如何正确地对`img`标签使用`onload`事件进行绑定。 通常，开发者会尝试以下方式对`img`标签绑定`onload`事件： ```html <script type='text/javascript'> window.onload = ...
动态创建script、link标签实现资源的懒加载
vcxiaohan的博客
07-14 3193
在网页中异步加载javascript js原生： //行内函数 function callback(){ Console.log(‘calllback’); } //异步加载函数 function loadScript(url, callback){ var script = document.createElement ("script") script.type...
判断<script><link>等标签src 或href内容是否加载完成
懒虫一个V
08-22 7963
这个内容很简单只需要判断biaoqian
html调用js文件中的标量,html异步加载文本以及onload、onerror的触发
weixin_28844235的博客
06-04 329
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？html异步加载文本以及onload、onerror的触发最近项目开发中，需要一些异步加载文件的操作，简单的可以通过XMLHttpRequest对象来获取，但其中还涉及一些跨域的文件访问，因此设想使用src属性的跨域能力来加载文件，这里做一下对onload、onerror的统计总结。1. traceur、requirej...
Ajax中onreadystatechange函数放在open()后不执行这件事
渡阡
09-04 1725
今天动手写Ajax时遇到的问题：按照下面的顺序来写Ajax，功能是alert出txt文档的内容，在Chrome下可以执行onreadystatechange中的事件，在IE11及以下、FF就不能执行onreadystatechange中的代码。 ajax: 1.创建Ajax对象  ——new XMLHttpRequest;/ new ActiveXObject('Microsoft.XMLHTT...
微信web端返回自动刷新
Angular_的博客
03-31 3077
在ajax或者dwr提交的url后面加时间戳。 例如 http_request.onreadystatechange = funcName（函数名）; http_request.open(“GET”, url, true); 比如url是test .jsp 那么我们在它后面加上?time=new Date(); 即url=test.jsp?time=new Date(); 2 ：在u
onload
qq_36407090的博客
03-03 434
书上说的是这样的window.onload=function(){}//只能定义一个 等价于window.onload=function(){func1();func2();func3();} 其实也只是定义一个 定义和用法　　onload 事件会在页面或图像加载完成后立即发生。　　语法　　onload="SomeJavaScriptCode"参数 描述　　SomeJava
windowonload在火狐浏览器失效
Java_Enthusiast的博客
11-24 795
解决方法： 把 window.οnlοad=function () { }; 替换为 $(document).ready(function(){ });
script.onload = script.onreadystatechange = null;
最新发布
09-17
" 是一行javascript代码，用于清空脚本标签的onload和onreadystatechange事件的处理函数。 在使用脚本标签动态加载外部脚本时，可以通过设置onload和onreadystatechange事件的处理函数来监听脚本加载完成的事件。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值