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 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
详解javascript事件冒泡
Jan 09 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
JavaScript实现无限轮播效果
Nov 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和ACCESS写聊天室(六)
2006/10/09 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
canvas绘制七巧板
2017/02/03 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
浅析Python编写函数装饰器
2016/03/18 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
python3中确保枚举值代码分析
2020/12/02 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
Solaris操作系统的线程机制
2012/12/23 面试题
三查三看党性分析材料
2014/02/18 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
销售提升方案
2014/06/07 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
个人欠条范本
2015/07/03 职场文书
小学生运动会广播
2015/08/19 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python