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鼠标划过切换效果
Jun 30 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP 递归效率分析
2009/11/24 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
毕业生简历自我评价范文
2014/04/09 职场文书
学生鉴定评语大全
2014/05/05 职场文书
解除租房协议书
2014/12/03 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
教师节获奖感言
2015/07/31 职场文书
学校就业保障协议书
2019/06/24 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript