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操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
jquery map方法使用示例
Apr 23 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
js简单时间比较的方法
Aug 02 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
Angular排序实例详解
2017/06/28 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python反转列表的三种方式解析
2019/11/08 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
摄影助理岗位职责
2014/02/07 职场文书
英语教师求职信
2014/06/16 职场文书
班级文化标语
2014/06/23 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
超市员工管理制度
2015/08/06 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Mysql中常用的join连接方式
2022/05/11 MySQL