JS浏览器特征检测

Cquice 2013-05-23 01:34:29
浏览器检测一般都用UserAgent来判别吗？有没有用一些浏览器特有的特征来检测的，比如
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Borser Detection</title>
<script type="text/javascript">
function selfUserAgent(){
if(window.ActiveXObject){ //MSIE 6.0 or below

//判断是否是IE 7以上
if(document.documentElement && typeof document.documentElement.style.maxHeight != "undefined" ){

//判断是否是IE8+
if(typeof document.adoptNode != "undefined"){//Safari3 & FF & Opera & Chrome & IE8+
return "IE8及以上";
}

return "IE7及以上";
}

return "MSIE 6.0 or below";
}else if(typeof window.opera != "undefined"){ //Opera 独占
return "Opera";
}else if(typeof window.netscape != "undefined"){ //mozilla 独占
if(typeof window.Iterator != "undefined"){
if(typeof document.styleSheetSets != "undefined"){//Firefox &Opera 9
return "firefox 3及以上";
}

return "firefox 2";
}

return "Mozilla 1";
}else if(typeof window.pageXOffset != "undefined"){ //Mozilla & safari
try{
if(typeof external.AddSearchProvider != "undefined"){ //firefox & chrome
return "chrome";
}
} catch (e) {
return "safari";
}
}else { //unknown
return "unknown";
}
};

</script>
</head>

<body >
<script type="text/javascript">
document.write(selfUserAgent());
</script>

</script>
</body>
</html>

能不能做到判断的更详细一点的呢？比如说还可以判断其他类型的浏览器，比如说判断出的浏览器版本更详细些。求各位大神指导啊！
...全文
258 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
一天要饭生活又开始啦 2013-05-24
  • 打赏
  • 举报
 回复 


function getExplorer() {
var explorer = window.navigator.userAgent ;
//ie 
if (explorer.indexOf("MSIE") >= 0) {
alert("ie");
}
//firefox 
else if (explorer.indexOf("Firefox") >= 0) {
alert("Firefox");
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
alert("Chrome");
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
alert("Opera");
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
alert("Safari");
}
}

常用的判断方法：
1、判断浏览器是否为IE
        document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；
        navigator.userAgent.indexOf("MSIE")>0 ? 'IE' : 'others'：navigator.userAgent是描述用户代理信息。
        navigator.appName.indexOf("Microsoft") != -1 ? 'IE' : 'others'：navigator.appName描述浏览器名称信息。
2、判断IE版本
        navigator.appVersion.match(/6./i)=="6." ? 'IE6' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE6；
        navigator.userAgent.indexOf("MSIE 6.0")>0 ? 'IE7' : 'other version'：同上；
        navigator.appVersion.match(/7./i)=="7." ? 'IE7' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE7；
        navigator.userAgent.indexOf("MSIE 7.0")>0 ? 'IE7' : 'other version'：同上；
        navigator.appVersion.match(/8./i)=="8." ? 'IE8' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE8；
        navigator.userAgent.indexOf("MSIE 8.0")>0 ? 'IE8' : 'other version'：同上。
3、JS获取浏览器信息
        浏览器代码名称：navigator.appCodeName
        浏览器名称：navigator.appName
        浏览器版本号：navigator.appVersion
        对Java的支持：navigator.javaEnabled()
        MIME类型（数组）：navigator.mimeTypes
        系统平台：navigator.platform
        插件（数组）：navigator.plugins
        用户代理：navigator.userAgent
 
DEMO:
Js代码 
<script language="JavaScript">  
    <!--  
function getOs()  
{  
    var OsObject = "";  
   if(navigator.userAgent.indexOf("MSIE")>0) {  
        return "MSIE";  
   }  
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){  
        return "Firefox";  
   }  
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {  
        return "Safari";  
   }   
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){  
        return "Camino";  
   }  
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){  
        return "Gecko";  
   }  
    
}  
 alert("您的浏览器类型为:"+getOs());  
    -->  
</script>
Cquice 2013-05-23
  • 打赏
  • 举报
 回复
引用 5 楼 seacean2000 的回复:
这个浏览器类型的判断是一件很复杂的事情，涉及到浏览器的引擎，版本号，运行平台等等。当然了，这种是最细致的浏览器检查。稍微粗略一级的是判断浏览器是否支持特定的功能，这个是大部分的web项目使用的检测。第一种的检测方法如下： var client=function(){ var engine={ //呈现引擎 ie:0, gecko:0, webkit:0, khtml:0, opera:0, //版本号 ver:null }; var browser={ //主要浏览器 ie:0, firefox:0, safari:0, konq:0, opera:0, chrome:0 //具体版本号 ver:null }; var system={ //平台、设备和移动平台 win:false, mac:false, xll:false, iphone:false, ipad:false, ipod:false, ios:false, android:false, nokiaN:false, winMobile:false, wii:false, ps:false }; var ua=navigator.userAgent; if(window.opera){ engine.ver=browser.ver=window.opera.version(); engine.opera=browser.opera=parseFloat(engine.ver); }else if(/AppleWebKit\/(\s+)/.test(ua)){ engine.ver=RegExp["$1"]; engine.webkit=parseFloat(browser.ver); //确定是chrome还是safari if(/Chrome\/(\s+)/.test(ua)){ browser.ver=RegExp["$1"]; browser.chrome=parseFloat(browser.ver); }else if(/Version\/(\s+)/.test(ua)){ browser.ver=RegExp["$1"]; browser.safari=parseFloat(browser.ver); }else{ var safariVersion=1; if(engine.webkit<100){ safariVersion=1; }else if(engine.webkit<312){ safariVersion=1.2; }else if(engine.webkit<412){ safariVersion=1.3; }else{ safariVersion=2; } browser.safari=browser.ver=safariVersion; } }else if(/KHTML\/(\s+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ engine.ver=browser.ver=RegExp["$1"]; engine.khtml=browser.konq=parseFloat(engine.ver); }else if(/rv:([^\]+)\) Gecko\/\d{8}/.test(ua)){ engine.ver=RegExp["$1"]; engine.gecko=parseFloat(engine.ver); //确定是不是FireFox if(/FireFox\/(\s+)/.test(ua)){ browser.ver=RegExp["$1"]; browser.firefox=parseFloat(browser.ver); } }else if(/MSIE([^;]+)/.test(ua)){ engine.ver=browser.ver=RegExp["$1"]; engine.ie=browser.ie=parseFloat(engine.ver); } //检测浏览器 browser.ie=engine.ie; browser.opera=engine.opera; //检测平台 var p=navigator.platform; system.win=p.indexOf("Win")==0; system.mac=p.indexOf("Mac")==0; system.xll=(p=="xll"||(p.indexOf("Linux")==0)); //检测windows操作系统 if(system.win){ if(/Win(?:dows)?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){ if(RegExp["$1"]=="NT"){ switch(RegExp["$2"]){ case "5.0":system.win="2000";break; case "5.1":system.win="XP";break; case "6.0":system.win="Vista";break; case "6.1":system.win="7";break; default:system.win="NT";break; } }else if(RegExp["$1"]){ system.win="ME"; }else{ system.win=RegExp["$1"]; } } } //移动设备 system.iphone=ua.indexOf("iPhone")>-1; system.ipod=ua.indexOf("iPod")>-1; system.ipad=ua.indexOf("iPad")>-1; system.nokiaN=ua.indexOf("NokiaN")>-1; //windows mobile if(system.win=="CE"){ system.winMobile=system.win; }else if(system.win=="Ph"){ if(/Window Phone OS (\d+.\d+)/.test(ua)){ system.win="Phone"; system.winMobile=parseFloat(RegExp["$1"]); } } //检测IOS版本 if(system.mac&&ua.indexOf("Mobile")>-1){ if(/CPU (?:iPhone)?OS (\d+_\d+)/.test(ua)){ system.ios=parseFloat(RegExp.$1.replace("_",".")); }else{ system.ios=2; } } //检测Android if(/Android (\d+\.\d+)/.test(ua)){ system.android=parsefloat(RegExp["$1"]); } //游戏系统 system.wii=ua.indexOf("Wii")>-1; system.ps=/playstation/i.texst(ua); //返回这些对象 return { engine:engine, browser:browser, system:system }; }; 第二种能力检测检测手段如下： var hasXmlDom=document.implementation.hasFeature("XML","1.0"); 但是这个检测有时并不可靠，需要进行能力检测。
谢谢了，第一种方法我基本上已经做好了，现在需要的就是第二种，检测浏览器能力的，先不管了，第二种随便做下吧！
本自具足反求诸己 2013-05-23
  • 打赏
  • 举报
 回复
这个浏览器类型的判断是一件很复杂的事情，涉及到浏览器的引擎，版本号，运行平台等等。当然了，这种是最细致的浏览器检查。稍微粗略一级的是判断浏览器是否支持特定的功能，这个是大部分的web项目使用的检测。第一种的检测方法如下： var client=function(){ var engine={ //呈现引擎 ie:0, gecko:0, webkit:0, khtml:0, opera:0, //版本号 ver:null }; var browser={ //主要浏览器 ie:0, firefox:0, safari:0, konq:0, opera:0, chrome:0 //具体版本号 ver:null }; var system={ //平台、设备和移动平台 win:false, mac:false, xll:false, iphone:false, ipad:false, ipod:false, ios:false, android:false, nokiaN:false, winMobile:false, wii:false, ps:false }; var ua=navigator.userAgent; if(window.opera){ engine.ver=browser.ver=window.opera.version(); engine.opera=browser.opera=parseFloat(engine.ver); }else if(/AppleWebKit\/(\s+)/.test(ua)){ engine.ver=RegExp["$1"]; engine.webkit=parseFloat(browser.ver); //确定是chrome还是safari if(/Chrome\/(\s+)/.test(ua)){ browser.ver=RegExp["$1"]; browser.chrome=parseFloat(browser.ver); }else if(/Version\/(\s+)/.test(ua)){ browser.ver=RegExp["$1"]; browser.safari=parseFloat(browser.ver); }else{ var safariVersion=1; if(engine.webkit<100){ safariVersion=1; }else if(engine.webkit<312){ safariVersion=1.2; }else if(engine.webkit<412){ safariVersion=1.3; }else{ safariVersion=2; } browser.safari=browser.ver=safariVersion; } }else if(/KHTML\/(\s+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ engine.ver=browser.ver=RegExp["$1"]; engine.khtml=browser.konq=parseFloat(engine.ver); }else if(/rv:([^\]+)\) Gecko\/\d{8}/.test(ua)){ engine.ver=RegExp["$1"]; engine.gecko=parseFloat(engine.ver); //确定是不是FireFox if(/FireFox\/(\s+)/.test(ua)){ browser.ver=RegExp["$1"]; browser.firefox=parseFloat(browser.ver); } }else if(/MSIE([^;]+)/.test(ua)){ engine.ver=browser.ver=RegExp["$1"]; engine.ie=browser.ie=parseFloat(engine.ver); } //检测浏览器 browser.ie=engine.ie; browser.opera=engine.opera; //检测平台 var p=navigator.platform; system.win=p.indexOf("Win")==0; system.mac=p.indexOf("Mac")==0; system.xll=(p=="xll"||(p.indexOf("Linux")==0)); //检测windows操作系统 if(system.win){ if(/Win(?:dows)?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){ if(RegExp["$1"]=="NT"){ switch(RegExp["$2"]){ case "5.0":system.win="2000";break; case "5.1":system.win="XP";break; case "6.0":system.win="Vista";break; case "6.1":system.win="7";break; default:system.win="NT";break; } }else if(RegExp["$1"]){ system.win="ME"; }else{ system.win=RegExp["$1"]; } } } //移动设备 system.iphone=ua.indexOf("iPhone")>-1; system.ipod=ua.indexOf("iPod")>-1; system.ipad=ua.indexOf("iPad")>-1; system.nokiaN=ua.indexOf("NokiaN")>-1; //windows mobile if(system.win=="CE"){ system.winMobile=system.win; }else if(system.win=="Ph"){ if(/Window Phone OS (\d+.\d+)/.test(ua)){ system.win="Phone"; system.winMobile=parseFloat(RegExp["$1"]); } } //检测IOS版本 if(system.mac&&ua.indexOf("Mobile")>-1){ if(/CPU (?:iPhone)?OS (\d+_\d+)/.test(ua)){ system.ios=parseFloat(RegExp.$1.replace("_",".")); }else{ system.ios=2; } } //检测Android if(/Android (\d+\.\d+)/.test(ua)){ system.android=parsefloat(RegExp["$1"]); } //游戏系统 system.wii=ua.indexOf("Wii")>-1; system.ps=/playstation/i.texst(ua); //返回这些对象 return { engine:engine, browser:browser, system:system }; }; 第二种能力检测检测手段如下： var hasXmlDom=document.implementation.hasFeature("XML","1.0"); 但是这个检测有时并不可靠，需要进行能力检测。
Cquice 2013-05-23
  • 打赏
  • 举报
 回复
引用 1 楼 zjleon2008 的回复:
z.ie6 = !-[1,] && !window.XMLHttpRequest; z.ie7 = document.documentMode === 7; 我就只判断ie足以...
Thank you !可是其他类型的浏览器我也需要检测，桑不起的毕业设计！
Cquice 2013-05-23
  • 打赏
  • 举报
 回复
引用 2 楼 zzgzzg00 的回复:
判断某个浏览器版本的话可以用navigator试试 但由于某些属性可以自行更改 所以检测的结果不一定正确 也可以根据功能或者函数方法的不同用功能检测试试
对啊！navigator基本是就是基于UserAgent的吧!我们我做的就是通过各自浏览器有不同的功能去检测,可是资料太少，总不能一个一个功能去测试吧！
似梦飞花 2013-05-23
  • 打赏
  • 举报
 回复
判断某个浏览器版本的话可以用navigator试试 但由于某些属性可以自行更改 所以检测的结果不一定正确 也可以根据功能或者函数方法的不同用功能检测试试
zjleon2008 2013-05-23
  • 打赏
  • 举报
 回复
z.ie6 = !-[1,] && !window.XMLHttpRequest; z.ie7 = document.documentMode === 7; 我就只判断ie足以...
js检测浏览器类型
NULL 博文链接：https://canlynet.iteye.com/blog/2258438
js检测浏览器版本 javascript检测浏览器
因为360的流氓性质，现在已经在 navigator.userAgent 检测不到360浏览器的特征。只能使用其他办法。这里是我自己找的一种办法 。 缺点是对移动端浏览器设备没统计和测试过，有什么问题和建议可以在留言中补充，我...
js检测各种浏览器
js检测ie8，ie9，ie10，ie11，edge，chrome，safari，opera。vue可直接引入。
浏览器特性检测库Feature.js.zip
Feature.js 是一个快速、简单、轻量级的浏览器特性检测库。它没有依赖，而且被压缩的仅 1kb。Feature.js 会在页面加载时自动初始化，但在初始化过程中不运行任何测试，只有在你发出请求时才运行，所以它的反应很快。...
【JavaScript源代码】如何用JavaScript检测当前浏览器是无头浏览器.docx
如何用JavaScript检测当前浏览器是无头浏览器 　目录　什么是无头浏览器(headless browser)？为什么叫“无头”浏览器？为什么要检测无头浏览器？检测无头浏览器User agent插件 Plugins语言WebGL浏览器特征加载失败的...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章