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 面向对象 继承
May 13 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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学习笔记(毕业设计)
2012/02/21 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
javascript中new关键字详解
2015/12/14 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
学院领导推荐信
2013/10/30 职场文书
医学生职业规划范文
2014/01/05 职场文书
投资入股合作协议书
2014/10/28 职场文书
不同意离婚代理词
2015/05/23 职场文书
电力培训学习心得体会
2016/01/11 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL