javascript 检测浏览器类型和版本的代码


Posted in Javascript onSeptember 15, 2009

检测浏览器及其版本的代码

getBrowser : function(){ 
var browser = { 
msie: false, firefox: false, opera: false, safari: false, 
chrome: false, netscape: false, appname: 'unknown', version: 0 
}, 
userAgent = window.navigator.userAgent.toLowerCase(); 
if ( /(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test( userAgent ) ){ 
browser[RegExp.$1] = true; 
browser.appname = RegExp.$1; 
browser.version = RegExp.$2; 
} else if ( /version\D+(\d[\d.]*).*safari/.test( userAgent ) ){ // safari 
browser.safari = true; 
browser.appname = 'safari'; 
browser.version = RegExp.$2; 
} 
return browser.appname + browser.version; 
}

对象/特征检测法

该方法是一种判断浏览器能力(而非浏览器的确切型号)的通用方法。大部分JS专家认为这个方法最合适,因为他们认为按照该方法所编写的脚本是经得起未来考验的。

//获取IE浏览器的版本号
//返回数值,显示IE的主版本号
function getIEVer() {
var ua = navigator.userAgent; //获取用户端信息
var b = ua.indexOf("MSIE "); //检测特殊字符串"MSIE "的位置
if (b < 0) {
return 0;
}
return parseFloat(ua.substring(b + 5, ua.indexOf(";", b))); //截取版本号字符串,并转换为数值
}

alert(getIEVer()); //返回数值8(我的IE8)

如果更关注浏览器的能力而不在乎它实际的身份,就可以使用这种方法。

user-agent字符串检测法

user-agent字符串提供了关于Web浏览器的大量信息,包括浏览器的名称和版本。

var ua = navigator.userAgent.toLowerCase(); //获取用户端信息
var info = {
ie: /msie/.test(ua) && !/opera/.test(ua),  //匹配IE浏览器
op: /opera/.test(ua),  //匹配Opera浏览器
sa: /version.*safari/.test(ua),  //匹配Safari浏览器
ch: /chrome/.test(ua),  //匹配Chrome浏览器
ff: /gecko/.test(ua) && !/webkit/.test(ua)  //匹配Firefox浏览器
};
(info.ie) && alert("IE浏览器");
(info.op) && alert("Opera浏览器");
(info.sa) && alert("Safari浏览器");
(info.ff) && alert("Firefox浏览器");
(info.ch) && alert("Chrome浏览器");

通常我们做得最多的,就是判断是否是IE了,其它几种浏览器一般都会符合标准.有些客户只需要符合IE和FF就已经满足了.那么我们可以这样做:

var isIE = (navigator.appName == "Microsoft Internet Explorer");

判断IE远远不止上面一种方法,可以使用IE更多特有的东西,如:window.ActiveXObject,document.all等,这些都属于对象/特征检测法了!通常要在不同的浏览器上写不同的样式(因为IE样式解析也各有不同),那就得判断版本了.可以这样做

//获取IE浏览器的版本号
//返回数值,显示IE的主版本号
function getIEVer() {
var ua = navigator.userAgent; //获取用户端信息
var b = ua.indexOf("MSIE "); //检测特殊字符串"MSIE "的位置
if (b < 0) {
return 0;
}
return parseFloat(ua.substring(b + 5, ua.indexOf(";", b))); //截取版本号字符串,并转换为数值
}

alert(getIEVer()); //返回数值7

检测操作系统:

var isWin = (navigator.userAgent.indexOf("Win") != -1); //如果是Windows系统,则返回true
var isMac = (navigator.userAgent.indexOf("Mac") != -1);  //如果是Macintosh系统,则返回true
var isUnix = (navigator.userAgent.indexOf("X11") != -1);  //如果是Unix系统,则返回true
var isLinux = (navigator.userAgent.indexOf("Linux") != -1);  //如果是Linux系统,则返回true

文章大部分内容来自于《Javascript征途》

Javascript 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
Jquery ajax基础教程
Nov 20 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
不安全的常用的js写法
Sep 15 #Javascript
Mootools 1.2教程 滑动效果(Slide)
Sep 15 #Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 #Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 #Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 #Javascript
Mootools 1.2教程 Tooltips
Sep 15 #Javascript
Mootools 1.2教程 类(一)
Sep 15 #Javascript
You might like
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php发送post请求的三种方法
2014/02/11 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
20招让你的Python飞起来!
2016/09/27 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
英语自荐信常用语句
2013/12/13 职场文书
领导检查欢迎词
2014/01/14 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
SpringBoot整合Minio文件存储
2022/04/03 Java/Android