Javascript DOM 编程实例讲解--仿LightBox效果提示框（5）

不过这里要说是————如何判断浏览器类型？

判断浏览器类型

// 判断是否为Opear浏览器
var isOpear=(navigator.userAgent.indexOf('Opera')>-1);
if(!isOpear){ 
   ...
if(document.all){
   ...
}
}    

这些代码的作用就是用来判断用户使用的浏览器类型的。可是大家要问了，isOpear我们可以很清楚知道，是判断浏览器是否为opera，但是document.all是判断什么的？

这个问题问得好。接下来就是我要简单的讲一讲在javascript编程中另一个要经常面对的问题--对浏览器类型的判断。

首先我给出一段常用的判断浏览器类型的代码：

var Brower={
    // 判断是否为IE6浏览器 
    isIE6:function(){return navigator.userAgent.search('MSIE')>0&&navigator.userAgent.search('6')>0;}, 
    // 判断是否为IE浏览器
    isIE:function(){return navigator.userAgent.search('MSIE')>0;},
    // 判断是否为Opera浏览器
    isOpera:function(){return navigator.userAgent.indexOf('Opera')>-1;},
    // 判断是否为FireFox浏览器
    isMoz:function(){return navigator.userAgent.indexOf('Mozilla/5.')>-1;}
}

还有些其他的判断其他类型的浏览器的代码，这里就不多写了，大家使用这些常用的代码基本就能够应对常规的开发了。调用这个类（这里就是我们前面提到的“用户定义对象（user-defined object）”）的方法：

 if(!Brower.isOpera){
     // Do something
 }

使用起来很方便，不是吗？不过这里其实我重点要介绍的不是以这中方法来判断浏览器类型，而是重点介绍一下像if(document.all)这样的判断浏览器类型的方法。又是刚才的问题，这个怎么判断浏览器类型啊？来看看这段代码：
 

// 获取DOM节点
function $(i){
    if(!document.getElementById)return false;
    if(typeof i==="string"){
          if(document.getElementById && document.getElementById(i)) {
               // W3C DOM
               return document.getElementById(i);
           }
           else if (document.all && document.all(i)) {
                // MSIE 4 DOM
               return document.all(i);
           }
           else if (document.layers && document.layers[i]) {
                // NN 4 DOM.. note: this won't find nested layers
               return document.layers[i];
           } 
           else {
               return false;
           }
    }
    else{return i;}
}
 

呵呵，看到了这段代码里面的注释了吗？再看看else if (document.all && document.all(i))，呵呵，我们在开发要面对的一个很头疼的问题————浏览器的兼容问题。原来我们做什么浏览器类型判断，其实根源就在于各大浏览器之间仍然存在着兼容问题。

各个浏览器之间都有着自己一些独特的标准，都有着自己的“专利”方法（对于以前的那段浏览器大战的历史，感兴趣的朋友可以GOOGLE一下），虽然现在我们的各个浏览器服务商都开始统一的支持W3C指定的标准，但是兼容性的问题仍然存在，也就是我刚才所的“专利”。

话题回到我们的实例，if(document.all) 是什么意思？这个就是我们的IE的“专利”（获得节点的“专利”），在IE浏览器中使用document.all[elementID]方法也可以同样获取指定ID的节点，效果跟document.getElementById一样，因为只有IE支持这么查找节点，所以如果支持docment.all（也就是if(document.all)）,那么它就是IE浏览器了。

再看看，我上面给的代码，就是一个为了兼容浏览器而改写（document.getElementById）的一个函数，document.layers就是基于Gecko内核浏览器支持的查询指定ID节点的方法。利用这些“专利”，我们就可以很方便的来判断浏览器的类型了，而不用花费大量时间和经历去分析userAgent的信息了。

顺便再多说一句，刚才的那些“专利”其实要是都改用支持W3C的document.getElementById，我们也就不用那么费力了。不过倒是真的要感谢我们IE的一些专利，比如我们著名的innerHTML。没有它，也就没有我们现在这个AJAX技术了。

又扯远了，还是回到我们的主题，由于浏览器的不兼容和各自的“专利”技术，所以我们这里要设置一个透明的效果，也针对IE和基于Gecko内核浏览器使用了filter和opacity属性来设置我们shadow层的透明值。