当前位置：首页 > 资讯 > 技术文档

使用js检测浏览器的实现代码

时间：2020-09-26 22:37 编辑：来源：阅读：
扫一扫，手机访问

摘要：使用js检测浏览器的实现代码

在写跨浏览器的js程序中，检测浏览器是一个很重要的工作。我们不时要为不同的浏览器写分支代码。 [b]如下是一种： [/b]

//添加事件工具函数
function addEvent(el,type,handle){
    if(el.addEventListener){//for standard browses
        el.addEventListener(type,handle,false);
    }else if(el.attachEvent){//for IE
        el.attachEvent("on"+event,handle);
    }else{//other
        el["on"+type]=handle;
    }
}

[b]1，[/b]第一种检测浏览器方式称为 user-agent 检测方式。是最古老的，它检测目标浏览器的确切型号，包括浏览器的名称和版本。其实就是一个字符串，用navigator.userAgen或navigator.appName获取。如下：

[u]复制代码[/u] 代码如下:

function isIE(){
    return navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all;
}
function isIE6() {
    return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")=="-1"?false:true;
}
function isIE7(){
    return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 7.0")=="-1"?false:true;
}
function isIE8(){
    return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 8.0")=="-1"?false:true;
}
function isNN(){
    return navigator.userAgent.indexOf("Netscape")!=-1;
}
function isOpera(){
    return navigator.appName.indexOf("Opera")!=-1;
}
function isFF(){
    return navigator.userAgent.indexOf("Firefox")!=-1;
}
function isChrome(){
    return navigator.userAgent.indexOf("Chrome") > -1; 
}

[b]2，[/b]第二种称为对象/特征检测方式，这是一种判断浏览器能力的方式，也是目前流行的方式。即在使用一个对象之前检测它是否存在。上面提到的addEvent方法中就使用了该方式。.addEventListener是w3c dom标准方式，而IE使用自己特有attachEvent。以下列举几个： a，talbe.cells只有IE/Opera支持。 b，innerText/insertAdjacentHTML除Firefox外，IE6/7/8/Safari/Chrome/Opera都支持。 c，window.external.AddFavorite用来在IE下添加到收藏夹。 d，window.sidebar.addPanel用来在FF下添加到收藏夹。 [b]3，[/b]第三种很有趣，暂且称为浏览器缺陷或bug 方式，即某些表现不是浏览器厂商刻意实现的。如下：

[u]复制代码[/u] 代码如下:

var isIE = !+"v1";
var isIE = !-[1,];
var isIE = "v"=="v";
isSafari=/a/.__proto__=='//';
isOpera=!!window.opera;

最经典的莫过于 !-[1,] 的判断方式，目前最少代码判断IE的方式，只需6个byte。这是个俄国人发现的。利用了数组[1,]的length。还有来自英国的年轻 James Padolsey 利用IE条件注释

[u]复制代码[/u] 代码如下:

var ie = (function(){
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );
    return v > 4 ? v : undef
}());

被称为史上最有创意的IE判断。 [b]注1：isIE = "v" == "v" 方式IE9已经修复该bug，不能用此方式判断IE浏览器了(2010-6-29用IE9 pre3测试的) [/b]

全部评论(0)

上一篇：深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
下一篇：JavaScript 页面坐标相关知识整理

资讯排行榜
更多>>