浏览器检测

最新推荐文章于 2024-08-24 08:25:57 发布
最新推荐文章于 2024-08-24 08:25:57 发布
阅读量970 收藏
点赞数
分类专栏： jquery

浏览器检测

/*
    一．navigator对象
    navigator对象最早由NetscapeNavigator2.0引入的navigator对象，现在已经成为识别客
    户端浏览器的事实标准。与之前的BOM对象一样，每个浏览器中的navigator对象也都有
    一套自己的属性。
*/

1.浏览器及版本号
不同的浏览器支持的功能、属性和方法各有不同。比如IE和Firefox显示的页面可能就
会有所略微不同。
alert('浏览器名称：' +navigator.appName);
alert('浏览器版本：' +navigator.appVersion);
alert('浏览器用户代理字符串：' +navigator.userAgent);
alert('浏览器所在的系统：' +navigator.platform);
2.浏览器嗅探器
浏览器嗅探器是一段程序，有了它，浏览器检测就变得简单了。我们这里提供了一个
browserdetect.js文件，用于判断浏览器的名称、版本号及操作系统。

alert(BrowserDetect.browser); //名称
alert(BrowserDetect.version); //版本
alert(BrowserDetect.OS) //系统
3.检测插件
插件是一类特殊的程序。他可以扩展浏览器的功能，通过下载安装完成。比如，在线音
乐、视频动画等等插件。
navigator对象的plugins属性，这个一个数组。存储在浏览器已安装插件的完整列表。

复制代码 
//列出所有的插件名
for(var i=0;i<navigator.plugins.length;i++){
    document.write(navigator.plugins[i].name+'<br />');
}
//检测非IE浏览器插件是否存在
function hasPlugin(name){
    var name=name.toLowerCase();
    for(var i=0;i<navigator.plugins.length;i++){
    if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
    return true;
    }
    }
    return false;
}
alert(hasPlugin('Flash')); //检测Flash是否存在
alert(hasPlugin('java')) //检测Java是否存在
复制代码

4.ActiveX
IE浏览器没有插件，但提供了ActiveX控件。ActiveX控件一种在Web页面中嵌入对象
或组件的方法。
由于在JS中，我们无法把所有已安装的ActiveX控件遍历出来，但我们还是可以去验
证是否安装了此控件。
//检测IE中的控件

复制代码 
function hasIEPlugin(name){
    try{
    newActiveXObject(name);
    return true;
    }catch(e){
    return false;
    }
}
//检测Flash
alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));
复制代码

PS：ShockwaveFlash.ShockwaveFlash是IE中代表FLASH的标识符，你需要检查哪种
控件，必须先获取它的标识符。

复制代码 
//跨浏览器检测是否支持Flash
function hasFlash(){
    var result=hasPlugin('Flash');
    if(!result){
    result=hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
    }
    return result;
}
//检测Flash
alert(hasFlash());
复制代码

5.MIME类型
MIME是指多用途因特网邮件扩展。它是通过因特网发送邮件消息的标准格式。现在也
被用于在因特网中交换各种类型的文件。
PS：mimeType[]数组在IE中不产生输出。

复制代码 
//遍历非IE下所有MIME类型信息
for(var i=0; i<navigator.mimeTypes.length; i++){
    if(navigator.mimeTypes[i].enabledPlugin!=null){
        document.write('<dl>');
        document.write('<dd>类型名称：' +navigator.mimeTypes[i].type+'</dd>');
        document.write('<dd>类型引用：' +navigator.mimeTypes[i].enabledPlugin.name+
        '</dd>');
        document.write('<dd>类型描述：' +navigator.mimeTypes[i].description+'</dd>');
        document.write('<dd>类型后缀：' +navigator.mimeTypes[i].suffixes+'</dd>');
        document.write('</dl>')
        }
}
复制代码

二．客户端检测
客户端检测一共分为三种，分别为：能力检测、怪癖检测和用户代理检测，通过这三种
检测方案，我们可以充分的了解当前浏览器所处系统、所支持的语法、所具有的特殊性能。
1.能力检测
能力检测又称作为特性检测，检测的目标不是识别特定的浏览器，而是识别浏览器的能
力。能力检测不必估计特定的浏览器，只需要确定当前的浏览器是否支持特定的能力，就可
以给出可行的解决方案。

复制代码 
//BOM章节的一段程序
var width = window.innerWidth; //如果是非IE浏览器
    if(typeof width!='number') { //如果是IE，就使用document
    if(document.compatMode=='CSS1Compat') {
    width=document.documentElement.clientWidth;
    }else{
    width=document.body.clientWidth; //非标准模式使用body
    }
}
复制代码

PS：上面其实有两块地方使用了能力检测，第一个就是是否支持innerWidth的检测，
第二个就是是否是标准模式的检测，这两个都是能力检测。
2.怪癖检测(bug检测)
与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器
支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷(bug)。
bug一般属于个别浏览器独有，在大多数新版本的浏览器被修复。在后续的开发过程中，
如果遇到浏览器bug我们再详细探讨。

var box={
    toString:function(){} //创建一个toString()，和原型中重名了
};
for(var o in box){
    alert(o); //IE浏览器的一个bug，不识别了
}

3.用户代理检测
用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求
过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过JavaScript的
navigator.userAgent属性访问。
用户代理代理检测，主要通过navigator.userAgent来获取用户代理字符串的，通过这组
字符串，我们来获取当前浏览器的版本号、浏览器名称、系统名称。
PS：在服务器端，通过检测用户代理字符串确定用户使用的浏览器是一种比较广为接
受的做法。但在客户端，这种测试被当作是一种万不得已的做法，且饱受争议，其优先级排
在能力检测或怪癖检测之后。饱受争议的原因，是因为它具有一定的欺骗性。

复制代码 
document.write(navigator.userAgent); //得到用户代理字符串
Firefox14.0.1
Mozilla/5.0(WindowsNT5.1;rv:14.0)Gecko/20100101Firefox/14.0.1
Firefox3.6.28
Mozilla/5.0(Windows;U;WindowsNT5.1;zh-CN;rv:1.9.2.28)Gecko/20120306
Firefox/3.6.28
Chrome20.0.1132.57m
Mozilla/5.0(WindowsNT5.1)AppleWebKit/536.11(KHTML,likeGecko)
Chrome/20.0.1132.57Safari/536.11
Safari5.1.7
Mozilla/5.0(WindowsNT5.1)AppleWebKit/534.57.2(KHTML,likeGecko)Version/5.1.7
Safari/534.57.2
IE7.0
Mozilla/4.0(compatible;MSIE7.0;WindowsNT5.1;.NETCLR1.1.4322;.NETCLR
2.0.50727;.NETCLR3.0.4506.2152;.NETCLR3.5.30729)
IE8.0
Mozilla/4.0(compatible;MSIE8.0;WindowsNT5.1;Trident/4.0;.NETCLR
1.1.4322;.NETCLR2.0.50727;.NETCLR3.0.4506.2152;.NETCLR3.5.30729)
复制代码
复制代码 
IE6.0
Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;.NETCLR1.1.4322;.NETCLR
2.0.50727;.NETCLR3.0.4506.2152;.NETCLR3.5.30729)
Opera12.0
Opera/9.80(WindowsNT5.1;U;zh-cn)Presto/2.10.289Version/12.00
Opera7.54
Opera/7.54(WindowsNT5.1;U)[en]
复制代码 
Opera8
Opera/8.0(WindowNT5.1;U;en)
Konqueror(Linux集成，基于KHTML呈现引擎的浏览器)
Mozilla/5.0(compatible;Konqueror/3.5;SunOS)KHTML/3.5.0(likeGecko)

只要仔细的阅读这些字符串，我们可以发现，这些字符串包含了浏览器的名称、版本和
所宿主的操作系统。
每个浏览器有它自己的呈现引擎：所谓呈现引擎，就是用来排版网页和解释浏览器的引
擎。通过代理字符串发现，我们归纳出浏览器对应的引擎：
IE--Trident， IE8体现出来了，之前的未体现
Firefox--Gecko，
Opera--Presto，旧版本根本无法体现呈现引擎
Chrome--WebKit WebKit是KHTML呈现引擎的一个分支，后独立开来
Safari--WebKit
Konqueror--KHTML
由上面的情况，我们需要检测呈现引擎可以分为五大类：IE、Gecko、WebKit、KHTML
和Opera。

复制代码 
var client=function(){ //创建一个对象
    var engine={ //呈现引擎
        ie:false,
        gecko:false,
        webkit:false,
        khtml:false,
        opera:false,
        ver:0 //具体的版本号
    };
    return{
    engine:engine //返回呈现引擎对象
    };
}(); //自我执行
alert(client.engine.ie); //获取ie
复制代码

以上的代码实现了五大引擎的初始化工作，分别给予true的初值，并且设置版本号为0。
下面我们首先要做的是判断Opera，因为Opera浏览器支持window.opera对象，通过这
个对象，我们可以很容易获取到Opera的信息。

复制代码 
for(var pinwindow.opera){ //获取window.opera对象信息
    document.write(p+"<br/>");
}
if(window.opera){ //判断opera浏览器
    engine.ver=window.opera.version(); //获取opera呈现引擎版本
    engine.opera=true; //设置真
}
//接下来，我们通过正则表达式来获取WebKit引擎和它的版本号。
else if(/AppleWebKit\/(\S+)/.test(ua)){ //正则WebKit
    engine.ver=RegExp['$1']; //获取WebKit版本号
    engine.webkit=true;
}
复制代码

然后，我们通过正则表达式来获取KHTML引擎和它的版本号。由于这款浏览器基于
Linux，我们无法测试。
//获取KHTML和它的版本号

else if(/KHTML\/(\S+)/.test(ua)|| /Konqueror\/([^;]+)/.test(ua)){
engine.ver=RegExp['$1'];
engine.khtml=true;
}
复制代码 
//下面，我们通过正则表达式来获取Gecko引擎和它的版本号。
else if(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){ //获取Gecko和它的版本号
    engine.ver=RegExp['$1'];
    engine.gecko=true;
}

//最后，我们通过正则表达式来获取IE的引擎和它的版本号。因为IE8之前没有呈现引
//擎，所以，我们只有通过"MSIE"这个共有的字符串来获取。
else if(/MSIE([^;]+)/.test(ua)){ //获取IE和它的版本号
    engine.ver=RegExp['$1'];
    engine.ie=true;
}
复制代码

上面获取各个浏览器的引擎和引擎的版本号，但大家也发现了，其实有些确实是浏览器
的版本号。所以，下面，我们需要进行浏览器名称的获取和浏览器版本号的获取。
根据目前的浏览器市场份额，我们可以给一下浏览器做检测：IE、Firefox、konq、opera、
chrome、safari。

复制代码 
var browser={ //浏览器对象
    ie:false,
    firefox:false,
    konq:false,
    opera:false,
    chrome:false,
    safari:false,
    ver:0, //具体版本
    name:'' //具体的浏览器名称
};
复制代码
复制代码 
//对于获取IE浏览器的名称和版本，可以直接如下：
else if(/MSIE([^;]+)/.test(ua)){
    engine.ver=browser.ver=RegExp['$1']; //设置版本
    engine.ie=browser.ie=true; //填充保证为true
    browser.name='Internet Explorer'; //设置名称
}
//对于获取Firefox浏览器的名称和版本，可以如下：
else if(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){
    engine.ver=RegExp['$1'];
    engine.gecko=true;
if(/Firefox\/(\S+)/.test(ua)){
    browser.ver=RegExp['$1']; //设置版本
    browser.firefox=true; //填充保证为true
    browser.name='Firefox'; //设置名称
    }
}
复制代码
复制代码 
//对于获取Chrome和safari浏览器的名称和版本，可以如下：
else if(/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver=RegExp['$1'];
    engine.webkit=parseFloat(engine.ver);
if(/Chrome\/(\S+)/.test(ua)){
    browser.ver=RegExp['$1'];
    browser.chrome=true;
    browser.name='Chrome';
    }elseif(/Version\/(\S+)/.test(ua)){
    browser.ver=RegExp['$1'];
    browser.chrome=true;
    browser.name='Safari';
    }
}
复制代码

PS：对于Safari3之前的低版本，需要做WebKit的版本号近似映射。而这里，我们将
不去深究，已提供代码。
浏览器的名称和版本号，我们已经准确的获取到，最后，我们想要去获取浏览器所宿主
的操作系统。

复制代码 
var system={ //操作系统
    win:false, //windows
    mac:false, //Mac
    x11:false //Unix、Linux
};
var p=navigator.platform; //获取系统
system.win=p.indexOf('Win')==0; //判断是否是windows
system.mac=p.indexOf('Mac')==0; //判断是否是mac
system.x11=(p=='X11') || (p.indexOf('Linux')==0) //判断是否是Unix、Linux
复制代码

PS：这里我们也可以通过用户代理字符串获取到windows相关的版本，这里我们就不
去深究了，提供代码和对应列表。

white__cat
关注
专栏目录
vue-browser-detect-plugin:Vue浏览器检测插件
05-14
Vue浏览器检测插件 Vue的简单插件，可检测浏览器名称，版本和用户代理。 安装 npm install vue-browser-detect-plugin 在您的main.js: import browserDetect from " vue-browser-detect-plugin " ; Vue.use...
浏览器检测JS代码(兼容目前各大主流浏览器)
11-25
本文实例介绍了JS代码实现浏览器检测，分享给大家供大家参考，具体内容如下 var BrowserMatch = { init: function () { this.browser = this.getBrowser().browser || "An Unknown Browser"; this.version = ...
[18]浏览器检测
weixin_34209851的博客
05-09 120
由于每个浏览器都具有自己独到的扩展，所以在开发阶段来判断浏览器是一个非常重要的步骤。虽然浏览器开发商在公共接口方面投入了很多精力，努力的去支持最常用的公共功能；但在现实中，浏览器之间的差异，以及不同浏览器的“怪癖”却是非常多的，因此客户端检测除了是一种补救措施，更是一种行之有效的开发策略。 一．navigator 对象 navigator 对象最早由 Netscape ...
浏览器检测工具：browser-detect详细指南
最新发布
gitblog_00364的博客
08-24 373
浏览器检测工具：browser-detect详细指南 browser-detectBrowser Detection for Laravel by hisorange!项目地址:https://gitcode.com/gh_mirrors/br/browser-detect 一、项目目录结构及介绍 browser-detect/ ├── index.js # 主要...
第十八章：浏览器检测
chaoyv
11-26 184
学习要点：1.navigator 对象2.客户端检测 由于每个浏览器都具有自己独到的扩展， 所以在开发阶段来判断浏览器是一个非常重要的步骤。 虽然浏览器开发商在公共接口方面投入了很多精力， 努力的去支持最常用的公共功能；但在现实中，浏览器之间的差异，以及不同浏览器的“怪癖”却是非常多的，因此客户端检测除了是一种补救措施，更是一种行之有效的开发策略。 一．navigator 对象naviga...
Web_JavaScript_客户端监测；
cyb专栏
05-12 524
// client_detection.js 客户端监测 // client自动运行 var client = function(){ // 呈现引擎 var engine = { ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0,
meteor-bowser:通过bowser.js对流星进行浏览器检测
05-11
浏览器检测器。 因为有时没有其他方法，甚至没有好的现代浏览器总是提供良好的功能检测机制。 所以...它是这样的： if ( bowser . msie && bowser . version <= 6 ) { alert ( 'Hello China' ) ; } 为...
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
10-27
本文将探讨如何通过JavaScript实现跨浏览器的基础事件处理、浏览器检测以及判断浏览器的名称、版本号和操作系统。 首先，让我们关注跨浏览器基础事件的处理。在JavaScript中，事件处理主要有两种方式：W3C标准的`...
js检测浏览器版本 javascript检测浏览器
06-07
可以检测 目前主流的浏览器及版本，包括 *Microsoft Internet Explorer IE浏览器 * --> TheWorld 世界之窗 * --> TT浏览器 * --> 360浏览器 * Mathon 傲游浏览器 * Opera Opera浏览器 * Firefox 火狐浏览器 * Chrome Chrome浏览器 因为360的流氓性质，现在已经在 navigator.userAgent 检测不到360浏览器的特征。只能使用其他办法。这里是我自己找的一种办法 。 缺点是对移动端浏览器设备没统计和测试过，有什么问题和建议可以在留言中补充，我会对它进行完善。 尊重劳动成果，1个资源分即可以！
Javascript基础——浏览器检测
灿灿大王搭建的黄金屋
05-21 517
Javascript基础——浏览器检测浏览器检测学习要点navigator对象1、浏览器及版本号2、浏览器嗅探器3、检测插件4、ActiveX5、MIME类型客户端检测1、能力监测2、怪癖检测（bug检测）3、用户代理检测 浏览器检测学习要点 由于每个浏览器都具有自己独到的扩展，所以在开发阶段来判断浏览器是一个非常重要的步骤。虽然浏览器开发商在公共接口方面投入了很多精力， 努力的去支持最常用的公...
检测浏览器版本
tangcc的博客
09-08 855
先取得值： // 仿真 simulation 取得navgator.userAgent的值 var simulationIE8 = "Mozilla/4.0(compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)"; var simulationIE9 = "Mozilla/5.0(compatible; MSIE 9.0; Windows N...
16.浏览器检测
weixin_30951389的博客
03-09 72
浏览器检测 学习要点：1.navigator对象2.客户端检测 由于每个浏览器都具有自己独到的扩展，所以在开发阶段来判断浏览器是一个非常重要的步骤。虽然浏览器开发商在公共接口方面投入了很多精力，努力的去支持最常用的公共功能；但在现实中，浏览器之间的差异，以及不同浏览器的”怪癖“却是非常多的，因此客户端检测除了是一种补救措施，更是一种行之有效的开发策略。 一、navigator对象naviga...
检测浏览器是否在线
zgjxyszh的博客
03-12 272
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;检测浏览器是否在线&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="button" id=
JavaScript实现的浏览器检测方法及其示例
在JavaScript编程中，浏览器检测是一项重要的功能，特别是在开发兼容性要求较高的Web应用时。本文将详细介绍几种常见的浏览器检测方法，以确保你的代码能在不同的浏览器环境中正常运行。 首先，我们探讨的是事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值