javascript下4个跨浏览器必备的函数


Posted in Javascript onMarch 07, 2010

下面四个函数就是其中的一部分。

首先我们要添加一段浏览器检测脚本:

/************************************ 
* 检测浏览器 
***********************************/ 
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()
这个想必大家都已知道。IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持。下面进行封装。

/************************************ 
* 添加事件绑定 
* @param obj : 要绑定事件的元素 
* @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 : 要删除事件的元素 
* @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 ); 
}

三) 获取元素的计算样式
计算样式也叫最终样式,也就是元素最终呈现出来的样式。IE 用的是元素的 currentStyle 属性,而其他浏览器则是标准的 document.defaultView.getComputedStyle() 方法。
/************************************ 
* 返回元素的计算样式 
* @param element : 元素 
* @param key : 样式名称(骆驼) 
************************************/ 
function getStyle(element, key) { 
// 参数不正确 
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"]; 
} 
// 浮动 
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()
domready 和 window.onload 有所不同,window.onload 是页面所有元素全部加载完毕,包括图像,视频等一些东西。而一般情况下我们不需要等那么久,而只需要 DOM 可用即可。
/************************************ 
* domready 
* @param fn: 要执行的函数 
************************************/ 
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 加载完毕!"); 
});
Javascript 相关文章推荐
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
javascript读写json示例
Apr 11 Javascript
jquery操作angularjs对象
Jun 26 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 #Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 #Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 #Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 #Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 #Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 #Javascript
javascript下判断一个元素是否存在的代码
Mar 05 #Javascript
You might like
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php二维码生成
2015/10/19 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
php探针不显示内存解决方法
2019/09/17 PHP
js玩一玩WSH吧
2007/02/23 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
python实现文件分组复制到不同目录的例子
2014/06/04 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python 的列表遍历删除实现代码
2020/04/12 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
中科前程Java笔试题
2016/11/20 面试题
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
语文教研活动总结
2014/07/02 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
2014年招商工作总结
2014/11/22 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
客户答谢会致辞
2015/07/30 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python