各瀏覽器對link標簽onload/onreadystatechange事件支持的差異分析
更新時間：2011年04月27日 00:08:22 作者：
各瀏覽器對link標簽onload/onreadystatechange事件支持的差異分析，需要的朋友可以參考下。
1，onload事件
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>Link Element onload</title>
<link type="text/css" rel="stylesheet" onload="alert(this)"/>
</HEAD>
<BODY>
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>Link Element onreadystatechange</title>
<link type="text/css" rel="stylesheet" onreadystatechange="alert(this)"/>
</HEAD>
<BODY>
</BODY>
</HTML>
IE6/7/8/9中彈出了兩次，其它瀏覽器均沒有彈。說明只有IE支持link元素的onreadystatechange事件。彈出兩次分別是readyState為loading，complete狀態(tài)?？墒褂胷eadyState來判斷載入情況。我們再使用JS動態(tài)創(chuàng)建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支持動態(tài)創(chuàng)建link元素時的onreadystatechange事件。
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>Link Element onload</title>
<link type="text/css" rel="stylesheet" onload="alert(this)"/>
</HEAD>
<BODY>
</BODY>
</HTML>
IE6/7 :
IE8/9 :
Opera :
即IE6/7/8/9/Opera都支持onload事件， Firefox/Safari/Chrome不支持。
注：用JS創(chuàng)建link標簽再添加到head中，情況如上。
2，onreadystatechange事件
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>Link Element onreadystatechange</title>
<link type="text/css" rel="stylesheet" onreadystatechange="alert(this)"/>
</HEAD>
<BODY>
</BODY>
</HTML>
IE6/7/8/9中彈出了兩次，其它瀏覽器均沒有彈。說明只有IE支持link元素的onreadystatechange事件。彈出兩次分別是readyState為loading，complete狀態(tài)?？墒褂胷eadyState來判斷載入情況。我們再使用JS動態(tài)創(chuàng)建link元素試試，
復(fù)制代碼 代碼如下:
<!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支持動態(tài)創(chuàng)建link元素時的onreadystatechange事件。
相關(guān)：
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
相關(guān)文章
這篇文章主要介紹了MUI Scroll插件的使用詳解,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄猨s圖片放大鏡實例講解(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)購物車完整版，實現(xiàn)加減計算數(shù)量跟金額，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
我們會經(jīng)常使用iframes來加載第三方的內(nèi)容、廣告或者插件。使用iframe是因為他可以和主頁面并行加載，不會阻塞主頁面。2011-07-07
在Angular中，最好在一個頂級模塊中加載和配置路由，它專注于路由功能，然后由根模塊AppModule導(dǎo)入它，最后還有初始化并監(jiān)聽瀏覽器的地址變化2023-01-01
微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問題解決
這篇文章主要介紹了微信小程序 調(diào)用微信授權(quán)窗口相關(guān)問題解決,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
eval() 函數(shù)計算 JavaScript 字符串，并把它作為腳本代碼來執(zhí)行，本文給大家2015-12-12
網(wǎng)站接入QQ登錄，首先引入授權(quán)js文件，這個需要提交申請的，通過之后按照下面的步驟進行操作就可以了2014-07-07
本篇文章主要介紹了用JavaScript和jQuery實現(xiàn)瀑布流的方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
自定義指令是微信小程序中用于增強模板功能的重要工具,通過合理使用自定義指令,可以提高代碼的可維護性和復(fù)用性,簡化頁面邏輯的編寫和管理,這篇文章主要介紹了微信小程序自定義指令,需要的朋友可以參考下2024-07-07