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
- 大小: 10.6 KB
- 大小: 12.5 KB
- 大小: 8.8 KB
分享到：
相关推荐
- 其他浏览器，包括Firefox、Safari、Chrome和Opera（动态创建link元素的情况除外），都不支持link标签的onreadystatechange事件，因此在这些浏览器中，该事件不会被触发。 值得注意的是，当使用JavaScript动态...
而IE9/10由于增加了对onload的支持，因此会先触发onreadystatechange事件（弹出2），随后触发onload事件（弹出1）。其他现代浏览器则只支持onload事件，因此只会执行弹出1的动作。 在实际应用中，开发者需要注意的...
3. 缓存对onload事件的影响：浏览器缓存可能会对onload事件的触发产生影响。例如，当图片已经在本地缓存中，第二次加载时浏览器可能不会触发onload事件。为了解决这个问题，开发者有时需要使用一些特定的方法来绕过...
浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法，如下： 代码如下:$(window).resize(function(){var surH = $(window).height();$(“.pic_conent”).height(surH);} 当浏览器变化，拉大拉小时，没有...
脱离document.onload和window.onload的onload事件，可多次添加加载事件！
// 在这里执行你原本要在onreadystatechange事件中的操作 // 例如，获取iframe内容或进行其他交互 var iframeContentDocument = iframe.contentDocument || iframe.contentWindow.document; console.log('iframe...
本文是小编总结的一些核心内容，个人感觉对大家有所帮助，具体内容请看下文： 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload，然后onunload，最后onload。 经过验证我得出的...
4. 浏览器兼容性：虽然现代浏览器大多支持以上API，但在旧版本或非主流浏览器中可能存在问题，需要做兼容性测试。 总的来说，Cocos Creator提供了丰富的工具和API供开发者在网页或浏览器环境中读取和保存JSON及文本...
### 鼠标事件大全与跨浏览器兼容性详解 在Web开发中，了解并掌握...在实际开发中，应考虑目标用户的浏览器分布，优先使用广泛支持的事件，同时为不支持的浏览器提供降级方案或替代策略，以实现最佳的跨浏览器兼容性。
本文主要探讨的是在不同浏览器环境下，如何正确地对`img`标签使用`onload`事件进行绑定。 通常，开发者会尝试以下方式对`img`标签绑定`onload`事件： ```html <script type='text/javascript'> window.onload = ...
当浏览器解析到`<body>`标签并且页面中的所有元素（不包括外部资源如图片和脚本）加载完成时，这个事件就会触发。例如： ```html <body onload="myFunction()"> ``` 在`myFunction()`函数中，你可以编写需要在`...
通常，我们希望在页面完全加载后再获取浏览器尺寸，因此可以将这些操作放在`window.onload`或`DOMContentLoaded`事件中。`window.onload`在所有资源（如图片）加载完毕后触发，而`DOMContentLoaded`在HTML结构加载...
浏览器事件 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。 先考察如下的代码： 代码如下: //...
javaScript的onload事件的代码，javaScript内嵌在html中。
</h1>”)2 代码如下://为了防止不支持 JavaScript 的浏览器把js当作为页面的内容来显示 //注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。 [removed] <!– ...
### JavaScript中的eventType事件及其浏览器支持性介绍 #### 一、概述 JavaScript (简称JS) 是一种广泛应用于网页前端开发的编程语言，它提供了丰富的事件处理机制来增强网页的交互性和用户体验。本文档主要介绍了...