JavaScript 中的浏览器检测? [复制]
Posted
技术标签:
【中文标题】JavaScript 中的浏览器检测? [复制]【英文标题】:Browser detection in JavaScript? [duplicate] 【发布时间】:2011-01-24 22:46:16 【问题描述】:如何使用 javascript 确定确切的浏览器和版本?
【问题讨论】:
确保您没有将关键功能基于此测试。 +1:好问题,因为建议检测功能支持而不是提取答案中的名称和版本。 这里有一个更好的解释对象检测的链接:quirksmode.org/js/support.html 更多相关答案可在this 和this dupe 上找到 【参考方案1】:navigator.saysWho = (() =>
const userAgent = navigator
let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []
let temp
if (/trident/i.test(match[1]))
temp = /\brv[ :]+(\d+)/g.exec(userAgent) || []
return `IE $temp[1] || ''`
if (match[1] === 'Chrome')
temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/)
if (temp !== null)
return temp.slice(1).join(' ').replace('OPR', 'Opera')
temp = userAgent.match(/\b(Edg)\/(\d+)/)
if (temp !== null)
return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)')
match = match[2] ? [ match[1], match[2] ] : [ navigator.appName, navigator.appVersion, '-?' ]
temp = userAgent.match(/version\/(\d+)/i)
if (temp !== null)
match.splice(1, 1, temp[1])
return match.join(' ')
)()
console.log(navigator.saysWho) // outputs: `Chrome 89`
顾名思义,这将告诉您浏览器提供的名称和版本号。
当您在多个浏览器上测试新代码时,它可以方便地对测试和错误结果进行排序。
【讨论】:
+1 来自我。有时,这与功能支持无关,实际上与浏览器有关。是的,用户代理信息可以被欺骗,但是当您处理旧浏览器并规避它们的错误时(例如 FF 3 的问题,即不为只读 AJAX POST 消息发送 Content-Length 标头),功能支持只是不别剪了。 很高兴知道这个函数返回的所有结果...... 我喜欢这个!谢啦!不过,我只是对倒数第一行和第二行进行了修改。我在第一行替换了:navigator.sayswho=
与 navigator.browserInfo=
以获得更好的可读性(即,几个月后我不会想知道它在代码中的作用)并将 return M.join(' ');
替换为 return 'browser': M[0], 'version': M[1] ;
以便我可以像使用它一样this 在全球范围内:console.log(navigator.browserInfo.browser);
和 console.log(navigator.browserInfo.version);
以获得更好的可访问性。对不起,我想我确实弄乱了它,即使它说“不要碰”。
暂时仅在 chrome 上测试...如果您希望获得完整版本号,请将 regx 更改为 (vivaldi|opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([0-9|\.]+)
区别是最后一个括号而不是 (d+)
它应该是 @987654330 @so 数字和点。还添加了 vivaldi 浏览器以防万一:)
这段代码很难读。 tem
是什么? M
是什么?【参考方案2】:
我建议使用小型 JavaScript 库 Bowser。它基于navigator.userAgent
,并针对包括 iphone、android 等在内的所有浏览器进行了很好的测试。
https://github.com/ded/bowser
你可以简单地说:
if (bowser.msie && bowser.version <= 6)
alert('Hello IE');
else if (bowser.firefox)
alert('Hello Foxy');
else if (bowser.chrome)
alert('Hello Chrome');
else if (bowser.safari)
alert('Hello Safari');
else if(bowser.iphone || bowser.android)
alert('Hello mobile');
【讨论】:
【参考方案3】:这是我为了获取客户信息而写的东西
var ua = navigator.userAgent.toLowerCase();
var check = function(r)
return r.test(ua);
;
var DOC = document;
var isStrict = DOC.compatMode == "CSS1Compat";
var isOpera = check(/opera/);
var isChrome = check(/chrome/);
var isWebKit = check(/webkit/);
var isSafari = !isChrome && check(/safari/);
var isSafari2 = isSafari && check(/applewebkit\/4/); // unique to
// Safari 2
var isSafari3 = isSafari && check(/version\/3/);
var isSafari4 = isSafari && check(/version\/4/);
var isIE = !isOpera && check(/msie/);
var isIE7 = isIE && check(/msie 7/);
var isIE8 = isIE && check(/msie 8/);
var isIE6 = isIE && !isIE7 && !isIE8;
var isGecko = !isWebKit && check(/gecko/);
var isGecko2 = isGecko && check(/rv:1\.8/);
var isGecko3 = isGecko && check(/rv:1\.9/);
var isBorderBox = isIE && !isStrict;
var isWindows = check(/windows|win32/);
var isMac = check(/macintosh|mac os x/);
var isAir = check(/adobeair/);
var isLinux = check(/linux/);
var isSecure = /^https/i.test(window.location.protocol);
var isIE7InIE8 = isIE7 && DOC.documentMode == 7;
var jsType = '', browserType = '', browserVersion = '', osName = '';
var ua = navigator.userAgent.toLowerCase();
var check = function(r)
return r.test(ua);
;
if(isWindows)
osName = 'Windows';
if(check(/windows nt/))
var start = ua.indexOf('windows nt');
var end = ua.indexOf(';', start);
osName = ua.substring(start, end);
else
osName = isMac ? 'Mac' : isLinux ? 'Linux' : 'Other';
if(isIE)
browserType = 'IE';
jsType = 'IE';
var versionStart = ua.indexOf('msie') + 5;
var versionEnd = ua.indexOf(';', versionStart);
browserVersion = ua.substring(versionStart, versionEnd);
jsType = isIE6 ? 'IE6' : isIE7 ? 'IE7' : isIE8 ? 'IE8' : 'IE';
else if (isGecko)
var isFF = check(/firefox/);
browserType = isFF ? 'Firefox' : 'Others';;
jsType = isGecko2 ? 'Gecko2' : isGecko3 ? 'Gecko3' : 'Gecko';
if(isFF)
var versionStart = ua.indexOf('firefox') + 8;
var versionEnd = ua.indexOf(' ', versionStart);
if(versionEnd == -1)
versionEnd = ua.length;
browserVersion = ua.substring(versionStart, versionEnd);
else if(isChrome)
browserType = 'Chrome';
jsType = isWebKit ? 'Web Kit' : 'Other';
var versionStart = ua.indexOf('chrome') + 7;
var versionEnd = ua.indexOf(' ', versionStart);
browserVersion = ua.substring(versionStart, versionEnd);
else
browserType = isOpera ? 'Opera' : isSafari ? 'Safari' : '';
【讨论】:
总是运行所有检查不是有点浪费吗?如果您知道它是 Windows,那么检查 Linux 似乎毫无意义,不是吗... @Matthias,感谢您的建议。我将尝试优化解决方案。同样的逻辑也可以应用于浏览器的测试。 你的答案是任何人都能给出的最佳答案..thx.让我的生活更轻松 @ArunPJohny:+1,对于那些你别无选择只能浏览器检测而不是功能检测的可怕、罕见的情况。您是否保持最新状态,也许在某个操作系统项目中?显然,自从你写了这个答案之后,IE 就不再说 MSIE 了…… 我看到的都是var var var var var var ...
请以后看到这个的程序员不要这样做。这真的没有必要,而且对于患有强迫症的项目经理来说阅读起来很痛苦。【参考方案4】:
以下是 2016 年检测浏览器的方法,包括 Microsoft Edge、Safari 10 和 Blink 检测:
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) return p.toString() === "[object SafariRemoteNotification]"; )(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;
这种方法的美妙之处在于它依赖于浏览器引擎属性,因此它甚至涵盖衍生浏览器,例如 Yandex 或 Vivaldi,它们实际上与它们使用的引擎的主要浏览器兼容。 Opera 是个例外,它依赖于用户代理嗅探,但今天(即 15 版及更高版本)甚至 Opera 本身也只是 Blink 的一个外壳。
【讨论】:
本页唯一正确答案。在最新的 IE 版本之后,导航器对象不再可靠。 查看其他答案以获取有关这些测试所基于的文档:***.com/a/9851769/726097 @einjohn 也是我写的 :D 很高兴链接! window.chrome.webstore 自 2018 年 6 月 12 日起已弃用,因此它会被评估为错误并且 Chrome 检测会中断。 @MihalyKR 谢谢,我一直在研究解决方案,很快就会更新。【参考方案5】:通常最好尽可能避免使用特定于浏览器的代码。 JQuery $.support
属性可用于检测对特定功能的支持,而不是依赖于浏览器名称和版本。
例如,在 Opera 中,您可以伪造 Internet Explorer 或 firefox 实例。
JQuery.support 的详细描述可以在这里找到:http://api.jquery.com/jQuery.support/
现在根据 jQuery 已弃用。
我们强烈建议使用外部库,例如 Modernizr 而不是依赖
jQuery.support
中的属性。
在编写网站代码时,我总是确保非 js 用户也可以使用导航等基本功能。这可能是讨论的对象,如果主页针对特殊受众,则可以忽略。
【讨论】:
有时您确实需要了解浏览器,因为相同的功能以不同的方式支持。因此,如果使用 jQuery,$.browser 是正确的方法,如 user288744 所示 有时您确实需要知道浏览器版本。请务必回答所提出的问题。 @PhilRykoff - 但您没有回答问题的 99% 情况 - 您正在回答另一个问题的 99% 情况,您认为提问者打算问或应该问.也许先要求澄清? @Phil,你是对的,有时最好的答案是提问者甚至没有问过的答案。但是,我不同意您将该理论应用于这个问题。考虑window.onpopstate
(请记住,对于从未提及 jQuery 的问题,非 jQuery 答案是最理想的)——与其他浏览器相比,IE 不会在初始视图中触发它。有时,为了稳健,您必须考虑您正在处理的浏览器以正确实现功能。鉴于这个问题的标题,这正是人们所期望的信息,而你却没有。
呃,我不想这么说,但是除了出于兼容性目的使用多个浏览器测试您的代码之外,您何时会欺骗浏览器的配置?【参考方案6】:
这会告诉您有关浏览器及其版本的所有详细信息。
<!DOCTYPE html>
<html>
<body>
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
【讨论】:
所有平台都支持吗? 在 firefox、IE 和 chrome 中检查....在那里工作....请让我知道您的反馈 看起来我所有的浏览器都是 Netscape。要么你的代码很烂,要么我很高 “在我的机器上工作”是不可接受的 Web 开发方法。 这些方法已弃用,不应使用。【参考方案7】:关于网络浏览器的所有信息都包含在 navigator 对象中。名称和版本在那里。
var appname = window.navigator.appName;
来源:javascript browser detection
【讨论】:
Chrome 显示“网景” XP 上的 Firefox 20.0.1 也显示“Netscape”。 Firefox 和 Chrome 说“网景”。 IE 8 什么也没说! 尝试应用代号w3schools.com/jsref/prop_nav_appcodename.asp appCodeName = Mozilla 和 appName = chrome 33 中的 Netscape【参考方案8】://Copy and paste this into your code/text editor, and try it
//Before you use this to fix compatability bugs, it's best to try inform the browser provider that you have found a bug and there latest browser may not be up to date with the current web standards
//Since none of the browsers use the browser identification system properly you need to do something a bit like this
//Write browser identification
document.write(navigator.userAgent + "<br>")
//Detect browser and write the corresponding name
if (navigator.userAgent.search("MSIE") >= 0)
document.write('"MS Internet Explorer ');
var position = navigator.userAgent.search("MSIE") + 5;
var end = navigator.userAgent.search("; Windows");
var version = navigator.userAgent.substring(position,end);
document.write(version + '"');
else if (navigator.userAgent.search("Chrome") >= 0)
document.write('"Google Chrome ');// For some reason in the browser identification Chrome contains the word "Safari" so when detecting for Safari you need to include Not Chrome
var position = navigator.userAgent.search("Chrome") + 7;
var end = navigator.userAgent.search(" Safari");
var version = navigator.userAgent.substring(position,end);
document.write(version + '"');
else if (navigator.userAgent.search("Firefox") >= 0)
document.write('"Mozilla Firefox ');
var position = navigator.userAgent.search("Firefox") + 8;
var version = navigator.userAgent.substring(position);
document.write(version + '"');
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)//<< Here
document.write('"Apple Safari ');
var position = navigator.userAgent.search("Version") + 8;
var end = navigator.userAgent.search(" Safari");
var version = navigator.userAgent.substring(position,end);
document.write(version + '"');
else if (navigator.userAgent.search("Opera") >= 0)
document.write('"Opera ');
var position = navigator.userAgent.search("Version") + 8;
var version = navigator.userAgent.substring(position);
document.write(version + '"');
else
document.write('"Other"');
//Use w3schools research the `search()` method as other methods are availible
【讨论】:
请不要推荐w3schools 而且,就像其他十亿个这样的代码 sn-ps 一样,这在 IE 11(可能是更高版本)上失败了。 Chrome 中的“未定义”。【参考方案9】:自从 Internet Explorer 11 (IE11+) 出现并且不再使用 MSIE
的标签名称后,我想出了一个旧检测功能的变体:
navigator.sayswho= (function()
var N= navigator.appName, ua= navigator.userAgent, tem;
// if IE11+
if (new RegExp("Trident/.*rv:([0-9]1,[\.0-9]0,)").exec(ua) !== null)
var M= ["Internet Explorer"];
if(M && (tem= ua.match(/rv:([0-9]1,[\.0-9]0,)/))!= null) M[2]= tem[1];
M= M? [M[0], M[2]]: [N, navigator.appVersion,'-?'];
return M;
var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
return M;
)();
【讨论】:
【参考方案10】:遗憾的是,IE11 的navigator.userAgent
中不再包含MSIE
:
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; BRI/2; BOIE9;ENUS; rv:11.0) like Gecko
至于为什么你想知道你正在使用哪个浏览器,这是因为每个浏览器都有自己的一组错误,你最终会实现浏览器和版本特定的解决方法,或者告诉用户使用不同的浏览器!
【讨论】:
这就是人们使用它的目的。如果他们知道他们不会支持 IE 检测它并让他们知道。【参考方案11】:var browser = navigator.appName;
var version = navigator.appVersion;
但是请注意,两者都不一定反映事实。许多浏览器可以设置为屏蔽为其他浏览器。因此,例如,您无法始终确定用户是使用 IE6 还是使用伪装成 IE6 的 Opera 进行冲浪。
【讨论】:
+1:与之前的downvote相反,理论上这是正确的方式;实际上,浏览器供应商用有问题的内容填充这些值;请参阅 MDC (developer.mozilla.org/En/DOM/Window.navigator) 和 MSDN (msdn.microsoft.com/en-us/library/ms535867%28VS.85%29.aspx) 上的文档;谷歌也把我带到了下面的页面(过时了,还没有 Chrome),这表明它主要是 Safari 报告垃圾:javascriptkit.com/jsref/navigator.shtml 理论上这甚至不是正确的方法 - 请参阅 HTML5 规范第 6.5.1.1 节客户端标识,其中提到 navigator.appName:必须返回字符串“Netscape”或全名浏览器,例如“Mellblom 浏览器”。换句话说,HTML5 标准甚至不假装要求 appName 具有有意义的值。 @Spike0xff 这个答案来自一个完全没有人使用 HTML5 的时代,或者确实没有人听说过它。 @ЯegDwight(或者我应该说 Elton?):navigator.appName
一直是 "Netscape"
或者几乎所有浏览器上都没有,早在 HTML5 规范编纂这种做法之前。
php 使用可选的 browsercap.ini 来做到这一点。你可以下载?全部?可能来自 browscap.org 的用户代理字符串。你会发现它非常复杂。此外,所有以 HTTP_ 开头的标头都可能是伪造的。【参考方案12】:
这个little library 可以帮助你。但请注意,浏览器检测并不总是解决方案。
【讨论】:
那么,解决办法是什么?您如何制作取决于浏览器或其版本的样式/功能?【参考方案13】:这是我为 Internet Explorer 自定义 CSS 的方法:
在我的 JavaScript 文件中:
function isIE ()
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
jQuery(document).ready(function()
if(var_isIE)
if(var_isIE == 10)
jQuery("html").addClass("ie10");
if(var_isIE == 8)
jQuery("html").addClass("ie8");
// you can also call here some function to disable things that
//are not supported in IE, or override browser default styles.
);
然后在我的 CSS 文件中,定义每种不同的样式:
.ie10 .some-class span
.......
.ie8 .some-class span
.......
【讨论】:
【参考方案14】:您可以扫描用户代理来查找浏览器名称,而不是硬编码网络浏览器:
navigator.userAgent.split(')').reverse()[0].match(/(?!Gecko|Version|[A-Za-z]+?Web[Kk]it)[A-Z][a-z]+/g)[0]
我已经在 Safari、Chrome 和 Firefox 上对此进行了测试。如果您发现这不适用于浏览器,请告诉我。
Safari:"Safari"
铬:"Chrome"
火狐:"Firefox"
如果需要,您甚至可以修改它以获取浏览器版本。请注意有更好的方法来获取浏览器版本
navigator.userAgent.split(')').reverse()[0].match(/(?!Gecko|Version|[A-Za-z]+?Web[Kk]it)[A-Z][a-z]+\/[\d.]+/g)[0].split('/')
样本输出:
Firefox/39.0
【讨论】:
不适用于某些不同的浏览器 - 即使在 IE 兼容模式下,它也会将 UCBrowser 指向 Chrome,哈哈 它说 Edge 是 Chrome...【参考方案15】:如果你想要一个返回浏览器和版本的函数,这里是对原始答案的改进:
navigator.browserInfo =
(
function()
var browser = '';
var version = '';
var idString = '';
var ua = navigator.userAgent;
var tem = [];
var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i);
//IE will be identified as 'Trident' and a different version number. The name must be corrected to 'Internet Explorer' and the correct version identified.
//ie correction
if(/trident/i.test(M[1]))
tem = /\brv[ :]+(\d+.?\d*)/g.exec(ua) || [];
browser = 'Internet Explorer';
version = tem[1];
//firefox
else if(/firefox/i.test(M[1]))
tem = /\brv[ :]+(\d+.?\d*)/g.exec(ua) || [];
browser = 'Firefox';
version = tem[1];
//safari
else if(/safari/i.test(M[1]))
tem = ua.match(/\bVersion\/(\d+.?\d*\s*\w+)/);
browser = 'Safari';
version = tem[1];
//If 'Chrome' is found, it may be another browser.
else if(M[1] === 'Chrome')
//opera
var temOpr = ua.match(/\b(OPR)\/(\d+.?\d*.?\d*.?\d*)/);
//edge
var temEdge = ua.match(/\b(Edge)\/(\d+.?\d*)/);
//chrome
var temChrome = ua.match(/\b(Chrome)\/(\d+.?\d*.?\d*.?\d*)/);
//a genuine 'Chrome' reading will result from ONLY temChrome not being null.
var genuineChrome = temOpr == null && temEdge == null && temChrome != null;
if(temOpr != null)
browser = temOpr[1].replace('OPR', 'Opera');
version = temOpr[2];
if(temEdge != null)
browser = temEdge[1];
version = temEdge[2];
if(genuineChrome)
browser = temChrome[1];
version = temChrome[2];
//There will be some odd balls, so if you wish to support those browsers, add functionality to display those browsers as well.
if(browser == '' || version == '')
idString = 'We couldn\'t find your browser, but you can still use the site';
else
idString = browser + ' version ' + version;
alert('Your browser is ' + idString);
//store the type of browser locally
if(typeof(Storage) !== "undefined")
//Store
localStorage.setItem('browser', browser);
localStorage.setItem('version', version);
else
alert('local storage not available');
)();
这样,它也将结果存储在本地,因此不必每次都运行此检查。
【讨论】:
这几乎是已接受答案的精确副本。请注意,@kennebec 的解决方案返回浏览器名称和版本,而此版本仅返回浏览器名称。【参考方案16】:这是我正在使用的:
var ua = navigator.userAgent;
var info =
browser: /Edge\/\d+/.test(ua) ? 'ed' : /MSIE 9/.test(ua) ? 'ie9' : /MSIE 10/.test(ua) ? 'ie10' : /MSIE 11/.test(ua) ? 'ie11' : /MSIE\s\d/.test(ua) ? 'ie?' : /rv\:11/.test(ua) ? 'ie11' : /Firefox\W\d/.test(ua) ? 'ff' : /Chrom(e|ium)\W\d|Crios\W\d/.test(ua) ? 'gc' : /\bSafari\W\d/.test(ua) ? 'sa' : /\bOpera\W\d/.test(ua) ? 'op' : /\bOPR\W\d/i.test(ua) ? 'op' : typeof MSPointerEvent !== 'undefined' ? 'ie?' : '',
os: /Windows NT 10/.test(ua) ? "win10" : /Windows NT 6\.0/.test(ua) ? "winvista" : /Windows NT 6\.1/.test(ua) ? "win7" : /Windows NT 6\.\d/.test(ua) ? "win8" : /Windows NT 5\.1/.test(ua) ? "winxp" : /Windows NT [1-5]\./.test(ua) ? "winnt" : /Mac/.test(ua) ? "mac" : /Linux/.test(ua) ? "linux" : /X11/.test(ua) ? "nix" : "",
touch: 'ontouchstart' in document.documentElement,
mobile: /IEMobile|Windows Phone|Lumia/i.test(ua) ? 'w' : /iPhone|iP[oa]d/.test(ua) ? 'i' : /Android/.test(ua) ? 'a' : /BlackBerry|PlayBook|BB10/.test(ua) ? 'b' : /Mobile Safari/.test(ua) ? 's' : /webOS|Mobile|Tablet|Opera Mini|\bCrMo\/|Opera Mobi/i.test(ua) ? 1 : 0,
tablet: /Tablet|iPad/i.test(ua),
;
info
属性:
browser
: gc
用于谷歌浏览器; ie9
-ie11
用于 IE; ie?
用于旧的或未知的 IE; ed
用于边缘; ff
用于火狐; sa
用于 Safari; op
为 Opera。
os
:mac
win7
win8
win10
winnt
winxp
winvista
linux
nix
mobile
: a
安卓; i
适用于 iOS (iPhone iPad); w
适用于 Windows Phone; b
黑莓; s
用于未检测到的正在运行 Safari 的移动设备; 1
用于其他未检测到的手机; 0
用于非移动设备
touch
: true
适用于支持触控的设备,包括同时具有鼠标和触控功能的触控笔记本电脑/笔记本电脑; false
不支持触摸
tablet
: true
或 false
https://jsfiddle.net/oriadam/ncb4n882/
【讨论】:
【参考方案17】:您可以使用 jQuery 库来检测浏览器版本。
示例:
jQuery.browser.version
但是,这只有在您还使用 jQuery 的其他功能时才有意义。添加整个库只是为了检测浏览器对我来说似乎有点矫枉过正。
更多信息: http://api.jquery.com/jQuery.browser/
(你必须向下滚动一点)
【讨论】:
我刚刚尝试过 win 8 chrome 25 和 ie 10。好吧,它完全失败了。 3 年后,任何当前的支持都会很好。 这个特性在 jQuery 1.3 中被弃用,最终在 jQuery 1.9 中被移除。所以,最好不要依赖它。【参考方案18】: var isOpera = !!window.opera || navigator.userAgent.indexOf('Opera') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome; // Chrome 1+
var isIE = /*@cc_on!@*/false;
你可以阅读更多 How to detect Safari, Chrome, IE, Firefox and Opera browser?
【讨论】:
【参考方案19】:我知道我回答这个问题已经很晚了,但我想我会把我的 sn-ps 扔在这里。这里的很多答案都可以,而且,正如有人指出的那样,通常最好使用feature detection
而不是依赖userAgent
字符串。但是,如果你要走那条路,我已经编写了一个完整的 sn-p,以及一个替代的 jQuery 实现来替换被贬低的$.browser
。
原版JS
我的第一个 sn-p 只是将四个属性添加到 navigator
对象:browser
、version
、mobile
和 webkit
。
jsFiddle
GitHub min/** navigator [extended]
* Simply extends Browsers navigator Object to include browser name, version number, and mobile type (if available).
*
* @property String browser The name of the browser.
* @property Double version The current Browser version number.
* @property String|Boolean mobile Will be `false` if is not found to be mobile device. Else, will be best guess Name of Mobile Device (not to be confused with browser name)
* @property Boolean webkit If is webkit or not.
*/
;(function()function c()tryswitch(!0)case /MSIE|Trident/i.test(navigator.userAgent):return"MSIE";case /Chrome/.test(navigator.userAgent):return"Chrome";case /Opera/.test(navigator.userAgent):return"Opera";case /Kindle|Silk|KFTT|KFOT|KFJWA|KFJWI|KFSOWI|KFTHWA|KFTHWI|KFAPWA|KFAPWI/i.test(navigator.userAgent):return/Silk/i.test(navigator.userAgent)?"Silk":"Kindle";case /BlackBerry/.test(navigator.userAgent):return"BlackBerry";case /PlayBook/.test(navigator.userAgent):return"PlayBook";case /BB[0-9]1,; Touch/.test(navigator.userAgent):return"Blackberry";
case /Android/.test(navigator.userAgent):return"Android";case /Safari/.test(navigator.userAgent):return"Safari";case /Firefox/.test(navigator.userAgent):return"Mozilla";case /Nokia/.test(navigator.userAgent):return"Nokia"catch(a)console.debug("ERROR:setBrowser\t",a)function d()tryswitch(!0)case /Sony[^ ]*/i.test(navigator.userAgent):return"Sony";case /RIM Tablet/i.test(navigator.userAgent):return"RIM Tablet";case /BlackBerry/i.test(navigator.userAgent):return"BlackBerry";case /iPhone/i.test(navigator.userAgent):return"iPhone";
case /iPad/i.test(navigator.userAgent):return"iPad";case /iPod/i.test(navigator.userAgent):return"iPod";case /Opera Mini/i.test(navigator.userAgent):return"Opera Mini";case /IEMobile/i.test(navigator.userAgent):return"IEMobile";case /BB[0-9]1,; Touch/i.test(navigator.userAgent):return"BlackBerry";case /Nokia/i.test(navigator.userAgent):return"Nokia";case /Android/i.test(navigator.userAgent):return"Android"catch(a)console.debug("ERROR:setMobile\t",a)return!1function e()tryswitch(!0)case /MSIE|Trident/i.test(navigator.userAgent):return/Trident/i.test(navigator.userAgent)&&
/rv:([0-9]1,[\.0-9]0,)/.test(navigator.userAgent)?parseFloat(navigator.userAgent.match(/rv:([0-9]1,[\.0-9]0,)/)[1].replace(/[^0-9\.]/g,"")):/MSIE/i.test(navigator.userAgent)&&0<parseFloat(navigator.userAgent.split("MSIE")[1].replace(/[^0-9\.]/g,""))?parseFloat(navigator.userAgent.split("MSIE")[1].replace(/[^0-9\.]/g,"")):"Edge";case /Chrome/.test(navigator.userAgent):return parseFloat(navigator.userAgent.split("Chrome/")[1].split("Safari")[0].replace(/[^0-9\.]/g,""));case /Opera/.test(navigator.userAgent):return parseFloat(navigator.userAgent.split("Version/")[1].replace(/[^0-9\.]/g,
""));case /Kindle|Silk|KFTT|KFOT|KFJWA|KFJWI|KFSOWI|KFTHWA|KFTHWI|KFAPWA|KFAPWI/i.test(navigator.userAgent):if(/Silk/i.test(navigator.userAgent))return parseFloat(navigator.userAgent.split("Silk/")[1].split("Safari")[0].replace(/[^0-9\.]/g,""));if(/Kindle/i.test(navigator.userAgent)&&/Version/i.test(navigator.userAgent))return parseFloat(navigator.userAgent.split("Version/")[1].split("Safari")[0].replace(/[^0-9\.]/g,""));case /BlackBerry/.test(navigator.userAgent):return parseFloat(navigator.userAgent.split("/")[1].replace(/[^0-9\.]/g,
""));case /PlayBook/.test(navigator.userAgent):case /BB[0-9]1,; Touch/.test(navigator.userAgent):case /Safari/.test(navigator.userAgent):return parseFloat(navigator.userAgent.split("Version/")[1].split("Safari")[0].replace(/[^0-9\.]/g,""));case /Firefox/.test(navigator.userAgent):return parseFloat(navigator.userAgent.split(/Firefox\//i)[1].replace(/[^0-9\.]/g,""));case /Android/.test(navigator.userAgent):return parseFloat(navigator.userAgent.split("Version/")[1].split("Safari")[0].replace(/[^0-9\.]/g,
""));case /Nokia/.test(navigator.userAgent):return parseFloat(navigator.userAgent.split("Browser")[1].replace(/[^0-9\.]/g,""))catch(a)console.debug("ERROR:setVersion\t",a)a:tryif(navigator&&navigator.userAgent)navigator.browser=c();navigator.mobile=d();navigator.version=e();var b;b:tryb=/WebKit/i.test(navigator.userAgent);break bcatch(a)console.debug("ERROR:setWebkit\t",a)b=void 0navigator.webkit=b;break acatch(a)throw Error("Browser does not support `navigator` Object |OR| has undefined `userAgent` property.");
)();
/* simple c & p of above */
【讨论】:
我试过你的代码(Vanilla JS)..当我尝试使用 Firefox 和移动浏览器中的 Opera 时,它没有给出正确的输出 @RajaDhasan 原版更新。立即尝试。 它可以在网络浏览器上完美运行.. 但是当我从 android mobile 尝试使用 chrome 浏览器时,它会打印 Android,而对于 opera,它会打印 chrome【参考方案20】:var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;
【讨论】:
【参考方案21】:不完全是你想要的,但接近它:
var jscriptVersion = /*@cc_on @if(@_jscript) @_jscript_version @else @*/ false /*@end @*/;
var geckoVersion = navigator.product === 'Gecko' && navigator.productSub;
var operaVersion = 'opera' in window && 'version' in opera && opera.version();
变量将包含适当的版本或false
(如果不可用)。
如果有人使用 Chrome 可以了解您是否可以像使用 window.opera
一样使用 window.chrome
,我将不胜感激。
【讨论】:
【参考方案22】:有时我们需要简单的方法来检查浏览器是否为 IE。可能是这样的:
var isMSIE = (/trident/i).test(navigator.userAgent);
if(isMSIE)
/* do something for ie */
else
/* do something else */
或简化的 siva 方法:
if(!!navigator.systemLanguage)
/* do something for ie */
else
/* do something else */
MSIE v.11 检查:
if( (/trident/i).test(navigator.userAgent) && (/rv:/i).test(navigator.userAgent) )
/* do something for ie 11 */
其他 IE 浏览器的 userAgent 属性中包含 MSIE 字符串,可以被它捕获。
【讨论】:
根据这个问题的许多其他答案,进行特征检测比浏览器检测要好得多。 检测 IE 浏览器的其他方法,包括用户代理中的功能和字符串检测。if( (/MSIE/i).test(navigator.userAgent) && !!window.MSInputMethodContext ) /* ie check */
或 if( !!window.MSInputMethodContext ) /* ie 11 check */
【参考方案23】:
我发现了一些有趣且更快的方法。
IE 支持navigator.systemLanguage
,它返回“en-US”,而其他浏览器返回undefined
。
<script>
var lang = navigator.systemLanguage;
if (lang!='en-US')document.write("Well, this is not internet explorer");
elsedocument.write("This is internet explorer");
</script>
【讨论】:
【参考方案24】:我做了这个小功能,希望对你有帮助。在这里你可以找到最新版本 browserDetection
function detectBrowser(userAgent)
var chrome = /.*(Chrome\/).*(Safari\/).*/g;
var firefox = /.*(Firefox\/).*/g;
var safari = /.*(Version\/).*(Safari\/).*/g;
var opera = /.*(Chrome\/).*(Safari\/).*(OPR\/).*/g
if(opera.exec(userAgent))
return "Opera"
if(chrome.exec(userAgent))
return "Chrome"
if(safari.exec(userAgent))
return "Safari"
if(firefox.exec(userAgent))
return "Firefox"
【讨论】:
【参考方案25】:下面的代码 sn-p 将显示如何根据 IE 版本和浏览器显示 UI 元素
$(document).ready(function ()
var msiVersion = GetMSIieversion();
if ((msiVersion <= 8) && (msiVersion != false))
//Show UI elements specific to IE version 8 or low
else
//Show UI elements specific to IE version greater than 8 and for other browser other than IE,,ie..Chrome,Mozila..etc
);
下面的代码将给出我们如何获得 IE 版本
function GetMSIieversion()
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0)
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
var trident = ua.indexOf('Trident/');
if (trident > 0)
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
var edge = ua.indexOf('Edge/');
if (edge > 0)
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
// other browser like Chrome,Mozila..etc
return false;
【讨论】:
以上是关于JavaScript 中的浏览器检测? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 javascript 检测浏览器名称和版本? [复制]
如何在浏览器 JavaScript 中检测 OS X 是不是处于暗模式? [复制]