JavaScript跨浏览器兼容的四个核心工具函数

JavaScript跨浏览器兼容工具函数概述

在Web开发中，为了确保脚本在不同浏览器环境下正常运行，通常需要引入一些基础的工具函数。以下介绍其中四个常用的跨浏览器兼容函数。

 
/************************************ 
* 浏览器内核检测逻辑
***********************************/ 
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;
} 

事件绑定与解绑的统一封装

上述代码主要用于识别浏览器类型。不同浏览器的事件绑定机制存在差异：IE使用attachEvent，而Firefox和Safari使用addEventListener，Opera则同时支持两者。为了简化开发，下面对这些差异进行封装处理。

 
/************************************ 
* 封装事件绑定函数
* @param obj : 目标DOM元素
* @param type : 事件类型字符串，无需前缀"on"，例如使用"click"而非"onclick"。
* @param fn : 事件触发时执行的回调函数
************************************/ 
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 );
} 
以下是一个简单的使用示例，为文档添加点击事件：
bind(document, "click", function() {
alert("Hello, World!!");
}); 

二) 移除事件绑定 unbind()

该函数与bind()的参数结构一致，但执行相反的操作，用于移除已绑定的事件。

 
/************************************ 
* 封装事件解绑函数
* @param obj : 目标DOM元素
* @param type : 事件类型字符串，无需前缀"on"，例如使用"click"而非"onclick"
* @param fn : 之前绑定的事件处理函数
************************************/ 
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 );
} 

获取元素计算样式的方法

计算样式（Computed Style）是指元素最终渲染在页面上的样式。IE通过currentStyle属性获取，而其他标准浏览器则遵循W3C标准，使用document.defaultView.getComputedStyle()方法。

 
/************************************ 
* 获取元素计算样式函数
* @param element : 目标DOM元素
* @param key : 样式属性名，需使用驼峰命名法
************************************/ 
function getStyle(element, key) {
// 参数校验
if ( typeof element != "object" || typeof key != "string" || key == "" )
return false;
// 处理不透明度(opacity)
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"];
} 
// 处理浮动(float)
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与其他浏览器在透明度实现机制上存在差异，此处统一通过opacity属性访问。此外，由于float是JavaScript保留字，浏览器对其进行了转义：IE使用styleFloat，其他浏览器使用cssFloat。本函数统一对外暴露为float属性名。

以下是获取元素透明度的示例：

 
var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");

DOM加载完成的检测机制

domready与window.onload事件不同。window.onload需等待页面所有资源（如图片、视频）加载完毕才触发，而domready仅在DOM结构构建完成后即可执行，通常更符合开发需求。

 
/************************************ 
* DOM就绪检测函数
* @param fn: 当DOM加载完成时执行的回调函数
************************************/ 
function domready(fn) {
// 参数类型校验
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已就绪，直接执行
return fn();
if(!_this.list) // 初始化待执行函数队列
_this.list = [];
_this.list.push(fn);
if (_this.done) return; // 若正在检测中，则退出
(function() { // 轮询检测机制
_this.done = true;
try {
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0);
return;
} 
// DOM加载完成后，执行所有等待的回调
_this.ready = true;
for (var i=0, l=_this.list.length; i<l; i++) {
_this.list[i]();
} 
})(); 
} 

使用示例如下：

 
domready(function(){
alert("DOM 加载完毕！");
});