脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 跨浏览器 函数

javascript下4个跨浏览器必备的函数

 更新时间：2010年03月07日 13:01:31   作者：  
如果你的项目要用到 JavaScript，而你不使用任何 JavaScript 框架，那么对于那些常用且各个浏览器明显不同的地方就需要用函数来封装起来。
下面四个函数就是其中的一部分。

首先我们要添加一段浏览器检测脚本：
复制代码 代码如下:

/************************************
* 检测浏览器
***********************************/
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 加载完毕！");
});

相关文章

  • js和canvas绘制圆形金属质感特效

    js和canvas绘制圆形金属质感特效

    在JavaScript中,可以使用HTML5提供的Canvas元素来进行绘图操作,要使用canvas元素,浏览器必须支持html5,Canvas是一个HTML元素,可以通过JavaScript来操作和绘制图形,本文示例实现js和canvas绘制圆形金属质感的诗词高级排版特效
    2024-09-09
  • JS删除某个父元素下的所有子元素

    JS删除某个父元素下的所有子元素

    JS中如何删除某个父元素下的所有子元素？这里我介绍几种方法,结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-09-09
  • CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库

    CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库

    实现类似于Photoshop控制面板输入文本数字的效果，所以名称叫做PsWheel。用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值，支持正整数、小数类型输入文本。
    2010-02-02
  • 基于JavaScript如何制作遮罩层对话框

    基于JavaScript如何制作遮罩层对话框

    遮罩层听起来貌似很复杂，其实说白了就是一个全界面的半透明的div，用户不可以点击下边的元素，或者说是点击没有反应，接下来通过本文给大家介绍JavaScript如何制作遮罩层对话框，对js遮罩层相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JavaScript模板引擎Template.js使用详解

    JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 微信小程序 JS动态修改样式的实现方法

    微信小程序 JS动态修改样式的实现方法

    这篇文章主要给大家介绍了关于微信小程序JS动态修改样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • 利用Javascript实现一套自定义事件机制

    利用Javascript实现一套自定义事件机制

    随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率。下面这篇文章主要给大家介绍了关于利用Javascript实现一套自定义事件机制的相关资料，需要的朋友可以参考下。
    2017-12-12
  • JavaScript生成图形验证码

    JavaScript生成图形验证码

    这篇文章主要为大家详细介绍了JavaScript生成图形验证码的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript简单生成 N~M 之间随机数的方法

    JavaScript简单生成 N~M 之间随机数的方法

    这篇文章主要介绍了JavaScript简单生成 N~M 之间随机数的方法,结合自定义函数分析了JS生成固定区间内随机数的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2017-01-01
  • 原生js实现日期联动

    原生js实现日期联动

    日期联动算是一个比较常见的功能了，随便度娘一下，你就能找到N多代码，今天给大家介绍的是个人比较常用，代码很简洁，高效，这里推挤给大家。
    2015-01-01

最新评论