javascript下4個(gè)跨瀏覽器必備的函數(shù)
更新時(shí)間：2010年03月07日 13:01:31 作者：
如果你的項(xiàng)目要用到 JavaScript，而你不使用任何 JavaScript 框架，那么對(duì)于那些常用且各個(gè)瀏覽器明顯不同的地方就需要用函數(shù)來(lái)封裝起來(lái)。
下面四個(gè)函數(shù)就是其中的一部分。
首先我們要添加一段瀏覽器檢測(cè)腳本：
/************************************
* 檢測(cè)瀏覽器
***********************************/
var user = navigator.userAgent;
var browser = {};
browser.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";
browser.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !browser.opera;browser.ie = user.indexOf("MSIE") > -1 && !browser.opera;
browser.gecko = user.indexOf("Gecko") > -1 && !browser.khtml;
if ( browser.ie ) {
var ie_reg = /MSIE (\d+\.\d+);/;
ie_reg.test(user);
var v = parseFloat(RegExp["$1"]);
browser.ie55 = v <= 5.5;
browser.ie6 = v <= 6;
}
一) 添加事件綁定 bind()
這個(gè)想必大家都已知道。IE 的事件綁定函數(shù)是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 則兩種都支持。下面進(jìn)行封裝。
/************************************
* 添加事件綁定
* @param obj : 要綁定事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件處理函數(shù)
************************************/
function bind( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
例如添加一個(gè)頁(yè)面點(diǎn)擊事件：
bind(document, "click", function() {
alert("Hello, World!!");
});
二) 刪除事件綁定 unbind()
和 bind() 函數(shù)參數(shù)相同，功能相反。
/************************************
* 刪除事件綁定
* @param obj : 要?jiǎng)h除事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件處理函數(shù)
************************************/
function unbind( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
三) 獲取元素的計(jì)算樣式
計(jì)算樣式也叫最終樣式，也就是元素最終呈現(xiàn)出來(lái)的樣式。IE 用的是元素的 currentStyle 屬性，而其他瀏覽器則是標(biāo)準(zhǔn)的 document.defaultView.getComputedStyle() 方法。
/************************************
* 返回元素的計(jì)算樣式
* @param element : 元素
* @param key : 樣式名稱(駱駝)
************************************/
function getStyle(element, key) {
// 參數(shù)不正確
if ( typeof element != "object" || typeof key != "string" || key == "" )
return false;
// 不透明度
if( key == "opacity" ) {
if(browser.ie) {
var f = element.filters;
if(f && f.length > 0 && f.alpha) {
return (f.alpha.opacity / 100);
}
return 1.0;
}
return document.defaultView.getComputedStyle(element, null)["opacity"];
}
// 浮動(dòng)
if ( key == "float" ) {
key = (browser.ie ? "styleFloat" : "cssFloat");
}
if ( typeof element.currentStyle != "undefined" ){
return element.currentStyle[key];
} else {
return document.defaultView.getComputedStyle(element, null)[key];
}
}
IE 和其他瀏覽器的透明度機(jī)制不一樣，這里統(tǒng)一用 opacity 表示透明度。還有，由于 float 是 JavaScript 的保留字，所以瀏覽器對(duì)其進(jìn)行了轉(zhuǎn)義，IE 用的是 styleFloat，其他則為 cssFloat。這里統(tǒng)一為 float。
例如：獲取透明度
var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");
四) DOM 加載完畢事件綁定 domready()
domready 和 window.onload 有所不同，window.onload 是頁(yè)面所有元素全部加載完畢，包括圖像，視頻等一些東西。而一般情況下我們不需要等那么久，而只需要 DOM 可用即可。
/************************************
* domready
* @param fn: 要執(zhí)行的函數(shù)
************************************/
function domready(fn) {
// 參數(shù)不正確
if(typeof fn != "function")
return false;
if(typeof document.addEventListener == "function") { // 非 IE 瀏覽器
document.addEventListener("DOMContentLoaded", fn, false);
return;
}
var _this = arguments.callee;
if(_this.ready) // 如果 DOM 已經(jīng)加載完畢, 則直接執(zhí)行
return fn();
if(!_this.list) // 創(chuàng)建一個(gè)待執(zhí)行函數(shù)數(shù)組
_this.list = [];
_this.list.push(fn);
if (_this.done) return; // 正在循環(huán)檢測(cè)則返回
(function() { // 循環(huán)檢測(cè)
_this.done = true;
try {
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0);
return;
}
// DOM 加載完畢, 執(zhí)行所有待執(zhí)行函數(shù)
_this.ready = true;
for (var i=0, l=_this.list.length; i<l; i++) {
_this.list[i]();
}
})();
}
例如：
domready(function(){
alert("DOM 加載完畢！");
});
首先我們要添加一段瀏覽器檢測(cè)腳本：
復(fù)制代碼 代碼如下:
/************************************
* 檢測(cè)瀏覽器
***********************************/
var user = navigator.userAgent;
var browser = {};
browser.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";
browser.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !browser.opera;browser.ie = user.indexOf("MSIE") > -1 && !browser.opera;
browser.gecko = user.indexOf("Gecko") > -1 && !browser.khtml;
if ( browser.ie ) {
var ie_reg = /MSIE (\d+\.\d+);/;
ie_reg.test(user);
var v = parseFloat(RegExp["$1"]);
browser.ie55 = v <= 5.5;
browser.ie6 = v <= 6;
}
一) 添加事件綁定 bind()
這個(gè)想必大家都已知道。IE 的事件綁定函數(shù)是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 則兩種都支持。下面進(jìn)行封裝。
復(fù)制代碼 代碼如下:
/************************************
* 添加事件綁定
* @param obj : 要綁定事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件處理函數(shù)
************************************/
function bind( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
例如添加一個(gè)頁(yè)面點(diǎn)擊事件：
bind(document, "click", function() {
alert("Hello, World!!");
});
二) 刪除事件綁定 unbind()
和 bind() 函數(shù)參數(shù)相同，功能相反。
復(fù)制代碼 代碼如下:
/************************************
* 刪除事件綁定
* @param obj : 要?jiǎng)h除事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件處理函數(shù)
************************************/
function unbind( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
三) 獲取元素的計(jì)算樣式
計(jì)算樣式也叫最終樣式，也就是元素最終呈現(xiàn)出來(lái)的樣式。IE 用的是元素的 currentStyle 屬性，而其他瀏覽器則是標(biāo)準(zhǔn)的 document.defaultView.getComputedStyle() 方法。
復(fù)制代碼 代碼如下:
/************************************
* 返回元素的計(jì)算樣式
* @param element : 元素
* @param key : 樣式名稱(駱駝)
************************************/
function getStyle(element, key) {
// 參數(shù)不正確
if ( typeof element != "object" || typeof key != "string" || key == "" )
return false;
// 不透明度
if( key == "opacity" ) {
if(browser.ie) {
var f = element.filters;
if(f && f.length > 0 && f.alpha) {
return (f.alpha.opacity / 100);
}
return 1.0;
}
return document.defaultView.getComputedStyle(element, null)["opacity"];
}
// 浮動(dòng)
if ( key == "float" ) {
key = (browser.ie ? "styleFloat" : "cssFloat");
}
if ( typeof element.currentStyle != "undefined" ){
return element.currentStyle[key];
} else {
return document.defaultView.getComputedStyle(element, null)[key];
}
}
IE 和其他瀏覽器的透明度機(jī)制不一樣，這里統(tǒng)一用 opacity 表示透明度。還有，由于 float 是 JavaScript 的保留字，所以瀏覽器對(duì)其進(jìn)行了轉(zhuǎn)義，IE 用的是 styleFloat，其他則為 cssFloat。這里統(tǒng)一為 float。
例如：獲取透明度
復(fù)制代碼 代碼如下:
var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");
四) DOM 加載完畢事件綁定 domready()
domready 和 window.onload 有所不同，window.onload 是頁(yè)面所有元素全部加載完畢，包括圖像，視頻等一些東西。而一般情況下我們不需要等那么久，而只需要 DOM 可用即可。
復(fù)制代碼 代碼如下:
/************************************
* domready
* @param fn: 要執(zhí)行的函數(shù)
************************************/
function domready(fn) {
// 參數(shù)不正確
if(typeof fn != "function")
return false;
if(typeof document.addEventListener == "function") { // 非 IE 瀏覽器
document.addEventListener("DOMContentLoaded", fn, false);
return;
}
var _this = arguments.callee;
if(_this.ready) // 如果 DOM 已經(jīng)加載完畢, 則直接執(zhí)行
return fn();
if(!_this.list) // 創(chuàng)建一個(gè)待執(zhí)行函數(shù)數(shù)組
_this.list = [];
_this.list.push(fn);
if (_this.done) return; // 正在循環(huán)檢測(cè)則返回
(function() { // 循環(huán)檢測(cè)
_this.done = true;
try {
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0);
return;
}
// DOM 加載完畢, 執(zhí)行所有待執(zhí)行函數(shù)
_this.ready = true;
for (var i=0, l=_this.list.length; i<l; i++) {
_this.list[i]();
}
})();
}
例如：
復(fù)制代碼 代碼如下:
domready(function(){
alert("DOM 加載完畢！");
});
相關(guān)文章
IE view-source 無(wú)法查看看源碼 JavaScript看網(wǎng)頁(yè)源碼
查看網(wǎng)頁(yè)源代碼的方法其實(shí)有好幾種，最常用的我們就是在瀏覽器中直接選擇“查看網(wǎng)頁(yè)源代碼”就可以了，但是在有些時(shí)候這種方法卻不能見(jiàn)效，以下再介紹幾種簡(jiǎn)單的方法供大家參考！2009-07-07
徹底解決 webpack 打包文件體積過(guò)大問(wèn)題
本篇文章主要介紹了徹底解決 webpack 打包文件體積過(guò)大問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JavaScript實(shí)現(xiàn)的日期控件具體代碼
JavaScript實(shí)現(xiàn)的日期控件，它還會(huì)讀取當(dāng)前的時(shí)間，有需要的朋友可以參考一下2013-11-11
因?yàn)镾et中存放的數(shù)據(jù)都是不會(huì)重復(fù)的數(shù)據(jù),我們?cè)诰帉慗S代碼的時(shí)候,因此我們可以利用Set來(lái)幫助我們更便捷地完成許多的事,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Set基本使用方法的相關(guān)資料,需要的朋友可以參考下2022-11-11
JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼
這篇文章主要介紹了JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼 ,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了JS Ajax請(qǐng)求如何防止重復(fù)提交的相關(guān)資料，通過(guò)覆蓋掉$.ajax而達(dá)到防止重復(fù)提交的問(wèn)題，實(shí)現(xiàn)代碼簡(jiǎn)單，需要的朋友可以參考下2016-06-06
做前端或者js程序員的同學(xué)應(yīng)該都有感受，在日常工作中，用的最多的功能，一個(gè)是ajax與后臺(tái)的數(shù)據(jù)接口，另一個(gè)就是對(duì)Dom元素的style控制，來(lái)達(dá)到不同的變換效果。2010-10-10
這篇文章主要介紹了JavaScript工具庫(kù)之Lodash詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了JS+CSS3實(shí)現(xiàn)超炫的散列畫廊特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
Web開發(fā)中,JavaScript與CSS的結(jié)合用于增強(qiáng)網(wǎng)頁(yè)的交互性和用戶體驗(yàn),本文將探索幾種高級(jí)方法來(lái)使用JavaScript操作CSS,并分別通過(guò)代碼示例進(jìn)行講解,希望對(duì)大家有所幫助2023-12-12