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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
做网页的一些技巧
2007/02/01 Javascript
htm调用JS代码
2007/03/15 Javascript
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
python求解水仙花数的方法
2015/05/11 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
铭立家具面试题
2012/12/06 面试题
P/Invoke是什么
2015/07/31 面试题
给客户的道歉信
2014/01/13 职场文书
需求分析说明书
2014/05/09 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
行政处罚事先告知书
2015/07/01 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android