提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript浏览器 函数 必备
2023-06-13 09:14:16 时间
下面四个函数就是其中的一部分。

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

/************************************
*检测浏览器
***********************************/
varuser=navigator.userAgent;
varbrowser={};
browser.opera=user.indexOf("Opera")>-1&&typeofwindow.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){
varie_reg=/MSIE(\d+\.\d+);/;
ie_reg.test(user);
varv=parseFloat(RegExp["$1"]);
browser.ie55=v<=5.5;
browser.ie6=v<=6;
}


一)添加事件绑定bind()
这个想必大家都已知道。IE的事件绑定函数是attachEvent；而Firefox,Safari是addEventListener；Opera则两种都支持。下面进行封装。
复制代码代码如下:

/************************************
*添加事件绑定
*@paramobj:要绑定事件的元素
*@paramtype:事件名称。不加"on".如:"click"而不是"onclick".
*@paramfn:事件处理函数
************************************/
functionbind(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()函数参数相同，功能相反。
复制代码代码如下:
/************************************
*删除事件绑定
*@paramobj:要删除事件的元素
*@paramtype:事件名称。不加"on".如:"click"而不是"onclick"
*@paramfn:事件处理函数
************************************/
functionunbind(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()方法。
复制代码代码如下:
/************************************
*返回元素的计算样式
*@paramelement:元素
*@paramkey:样式名称(骆驼)
************************************/
functiongetStyle(element,key){
//参数不正确
if(typeofelement!="object"||typeofkey!="string"||key=="")
returnfalse;

//不透明度
if(key=="opacity"){
if(browser.ie){
varf=element.filters;
if(f&&f.length>0&&f.alpha){
return(f.alpha.opacity/100);
}
return1.0;
}
returndocument.defaultView.getComputedStyle(element,null)["opacity"];
}

//浮动
if(key=="float"){
key=(browser.ie?"styleFloat":"cssFloat");
}
if(typeofelement.currentStyle!="undefined"){
returnelement.currentStyle[key];
}else{
returndocument.defaultView.getComputedStyle(element,null)[key];
}
}

IE和其他浏览器的透明度机制不一样，这里统一用opacity表示透明度。还有，由于float是JavaScript的保留字，所以浏览器对其进行了转义，IE用的是styleFloat，其他则为cssFloat。这里统一为float。

例如：获取透明度
复制代码代码如下:
vara=document.getElementById("test");
varopacity=getStyle(a,"opacity");

四)DOM加载完毕事件绑定domready()
domready和window.onload有所不同，window.onload是页面所有元素全部加载完毕，包括图像，视频等一些东西。而一般情况下我们不需要等那么久，而只需要DOM可用即可。
复制代码代码如下:
/************************************
*domready
*@paramfn:要执行的函数
************************************/
functiondomready(fn){
//参数不正确
if(typeoffn!="function")
returnfalse;
if(typeofdocument.addEventListener=="function"){//非IE浏览器
document.addEventListener("DOMContentLoaded",fn,false);
return;
}
var_this=arguments.callee;
if(_this.ready)//如果DOM已经加载完毕,则直接执行
returnfn();

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(vari=0,l=_this.list.length;i<l;i++){
_this.list[i]();
}
})();
}

例如：
复制代码代码如下:
domready(function(){
alert("DOM加载完毕！");
});

相关文章