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获取select默认选中的Option并不是当前选中值
May 07 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
js 执行上下文和作用域的相关总结
Feb 08 Javascript
uniapp开发小程序的经验总结
Apr 08 Javascript
JavaScript实现简单拖拽效果
Sep 15 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桌面中心(二) 数据库写入
2007/03/11 PHP
php SQL之where语句生成器
2009/03/24 PHP
JS 网站性能优化笔记
2011/05/24 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
php短址转换实现方法
2015/02/25 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
文员岗位职责
2013/11/09 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
国旗下演讲稿
2014/05/08 职场文书
初中信息技术教学计划
2015/01/22 职场文书
升学宴家长答谢词
2015/09/29 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python