利用JavaScript判断浏览器类型及版本
更新时间：2016年08月23日 14:37:56 投稿：daisy
浏览器对于我们来说，可能是最熟悉的工具了。在我们的产品开发过程中，经常要考虑浏览器兼容问题，以适应不同的用户人群，同时也减少因浏览器兼容问题所带来的服务量。所以检测浏览器的版本及类型就是很重要的一件事了，下面来一起看看用Javascript如何实现。
本文将介绍如何使用Javascript来检测浏览器的类型以及版本号，包括猎豹浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、360安全浏览器、QQ浏览器、百度浏览器、IE,Firefox,Chrome,safari,Opera等。
效果图
实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript判断浏览器类型及版本</title>
<script type= "text/javascript" >
/**
* 获取浏览器类型以及版本号
* 支持国产浏览器:猎豹浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、360安全浏览器、
* QQ浏览器、百度浏览器等.
* 支持国外浏览器:IE,Firefox,Chrome,safari,Opera等.
* 使用方法:
* 获取浏览器版本:Browser.client.version
* 获取浏览器名称(外壳):Browser.client.name
* @author:xuzengqiang
* @since :2015-1-27 10:26:11
**/
var Browser=Browser || (function(window){
var document = window.document,
navigator = window.navigator,
agent = navigator.userAgent.toLowerCase(),
//IE8+支持.返回浏览器渲染当前文档所用的模式
//IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8)
//IE10:10(兼容模式7||8||9)
IEMode = document.documentMode,
//chorme
chrome = window.chrome || false ,
System = {
//user-agent
agent : agent,
//是否为IE
isIE : /msie/.test(agent),
//Gecko内核
isGecko: agent.indexOf( "gecko" )> 0 && agent.indexOf( "like gecko" )< 0 ,
//webkit内核
isWebkit: agent.indexOf( "webkit" )> 0 ,
//是否为标准模式
isStrict: document.compatMode === "CSS1Compat" ,
//是否支持subtitle
supportSubTitle:function(){
return "track" in document.createElement( "track" );
},
//是否支持scoped
supportScope:function(){
return "scoped" in document.createElement( "style" );
},
//获取IE的版本号
ieVersion:function(){
try {
return agent.match(/msie ([\d.]+)/)[ 1 ] || 0 ;
} catch (e) {
console.log( "error" );
return IEMode;
}
},
//Opera版本号
operaVersion:function(){
try {
if (window.opera) {
return agent.match(/opera.([\d.]+)/)[ 1 ];
} else if (agent.indexOf( "opr" ) > 0 ) {
return agent.match(/opr\/([\d.]+)/)[ 1 ];
}
} catch (e) {
console.log( "error" );
return 0 ;
}
},
//描述:version过滤.如31.0.252.152 只保留31.0
versionFilter:function(){
if (arguments.length === 1 && typeof arguments[ 0 ] === "string" ) {
var version = arguments[ 0 ];
start = version.indexOf( "." );
if (start> 0 ){
end = version.indexOf( "." ,start+ 1 );
if (end !== - 1 ) {
return version.substr( 0 ,end);
}
}
return version;
} else if (arguments.length === 1 ) {
return arguments[ 0 ];
}
return 0 ;
}
};
try {
//浏览器类型(IE、Opera、Chrome、Safari、Firefox)
System.type = System.isIE? "IE" :
window.opera || (agent.indexOf( "opr" ) > 0 )? "Opera" :
(agent.indexOf( "chrome" )> 0 )? "Chrome" :
//safari也提供了专门的判定方式
window.openDatabase? "Safari" :
(agent.indexOf( "firefox" )> 0 )? "Firefox" :
'unknow' ;
//版本号
System.version = (System.type === "IE" )?System.ieVersion():
(System.type === "Firefox" )?agent.match(/firefox\/([\d.]+)/)[ 1 ]:
(System.type === "Chrome" )?agent.match(/chrome\/([\d.]+)/)[ 1 ]:
(System.type === "Opera" )?System.operaVersion():
(System.type === "Safari" )?agent.match(/version\/([\d.]+)/)[ 1 ]:
"0" ;
//浏览器外壳
System.shell=function(){
//遨游浏览器
if (agent.indexOf( "maxthon" ) > 0 ) {
System.version = agent.match(/maxthon\/([\d.]+)/)[ 1 ] || System.version ;
return "傲游浏览器" ;
}
//QQ浏览器
if (agent.indexOf( "qqbrowser" ) > 0 ) {
System.version = agent.match(/qqbrowser\/([\d.]+)/)[ 1 ] || System.version ;
return "QQ浏览器" ;
}
//搜狗浏览器
if ( agent.indexOf( "se 2.x" )> 0 ) {
return '搜狗浏览器' ;
}
//Chrome:也可以使用window.chrome && window.chrome.webstore判断
if (chrome && System.type !== "Opera" ) {
var external = window.external,
clientInfo = window.clientInformation,
//客户端语言:zh-cn,zh.360下面会返回undefined
clientLanguage = clientInfo.languages;
//猎豹浏览器:或者agent.indexOf("lbbrowser")>0
if ( external && 'LiebaoGetVersion' in external) {
return '猎豹浏览器' ;
}
//百度浏览器
if (agent.indexOf( "bidubrowser" )> 0 ) {
System.version = agent.match(/bidubrowser\/([\d.]+)/)[ 1 ] ||
agent.match(/chrome\/([\d.]+)/)[ 1 ];
return "百度浏览器" ;
}
//360极速浏览器和360安全浏览器
if ( System.supportSubTitle() && typeof clientLanguage === "undefined" ) {
//object.key()返回一个数组.包含可枚举属性和方法名称
var storeKeyLen = Object.keys(chrome.webstore).length,
v8Locale = "v8Locale" in window;
return storeKeyLen > 1 ? '360极速浏览器' : '360安全浏览器' ;
}
return "Chrome" ;
}
return System.type;
};
//浏览器名称(如果是壳浏览器,则返回壳名称)
System.name = System.shell();
//对版本号进行过滤过处理
System.version = System.versionFilter(System.version);
} catch (e) {
console.log( "error" );
}
return {
client:System
};
})(window);
alert(Browser.client.name+ " " +Browser.client.version);
</script>
</head>
<body>
</body>
</html>
总结
以上就是本文的全部内容，希望对大家的开发能有所帮助。如果有疑问可以留言讨论。
相关文章
这篇文章主要为大家介绍了JS中var let声明范围区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
javascript实现的图片预览和上传功能示例【兼容IE 9】
这篇文章主要介绍了javascript实现的图片预览和上传功能,结合实例形式分析了javascrpt图片预览和上传功能相关实现技巧与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了JS图片定时翻滚效果实现方法,涉及javascript结合时间函数实现页面元素动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
无感刷新机制的目的是在用户不知情的情况下,自动更新其认证令牌本文,主要介绍了js实现无感刷新的实践(附前后端实现),具有一定的参考价值,感兴趣的可以了解一下2024-04-04
IE6已经让人恶心很久了, Google旗下Youtube决定在3月13日起停止对IE6的支持. 但愿能加速IE6更换的速度.2010-11-11
这篇文章主要为大家详细介绍了layui表格数据重载，根据条件查询，监听按钮事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了微信小程序实现多选框功能及效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
WebSocket 是一种在 Web 应用程序中实现实时、双向通信的协议,在本文中,我们将深入介绍 WebSocket 的原理、用法以及一些实际应用场景,x需要的可以参考下2023-11-11
这篇文章主要介绍了微信小程序 如何保持登录状态,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
在我们js编写程序的时候，我们会写很多函数然后调用它们，那么这些函数调用的时候什么时候加()什么时候不加()呢？下面小编给大家简单介绍下2016-07-07
最新评论