Javascript 如何获取浏览器的名称客户端?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12489546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get browser's name client side?
提问by Viral Shah
Is there any object/method that will give me information on the browser, client side?
是否有任何对象/方法可以为我提供有关浏览器、客户端的信息?
For example, I need to detect IE browser. I am using:
例如,我需要检测 IE 浏览器。我在用:
function st_IsIE()
{
if(navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
{
return true;
}
return false;
}
Is there a better way?
有没有更好的办法?
采纳答案by Raab
EDIT:Since the answer is not valid with newer versions of jquery As jQuery.browser is deprecated in ver 1.9, So Use Jquery Migrate Pluginfor that matter.
编辑:由于答案对较新版本的 jquery 无效,因为 jQuery.browser 在 1.9 版中已弃用,因此请为此使用 Jquery Migrate 插件。
Original Answer
原答案
jQuery.browser
and
jQuery.browser.version
jQuery.browser
和
jQuery.browser.version
is your way to go...
是你要走的路吗...
回答by pedram
JavaScript side - you can get browser name like these ways...
JavaScript 方面 - 您可以通过这些方式获取浏览器名称...
if(window.navigator.appName == "") OR if(window.navigator.userAgent == "")
回答by Aniket Kulkarni
This is pure JavaScript solution. Which I was required.
I tried on different browsers. It is working fine. Hope it helps.
这是纯JavaScript 解决方案。我被要求。
我在不同的浏览器上尝试过。它工作正常。希望能帮助到你。
How do I detect the browser name ?
You can use the navigator.appName
and navigator.userAgent
properties. The userAgent
property is more reliable than appName
because, for example, Firefox (and some other browsers) may return the string "Netscape" as the value of navigator.appName
for compatibility with Netscape Navigator.
您可以使用navigator.appName
和navigator.userAgent
属性。该userAgent
属性比appName
因为例如,Firefox(和一些其他浏览器)可能返回字符串“Netscape”作为navigator.appName
与 Netscape Navigator 兼容的值更可靠。
Note, however, that navigator.userAgent
may be spoofed, too – that is, clients may substitute virtually any string for their userAgent
. Therefore, whatever we deduce from either appName
or userAgent
should be taken with a grain of salt.
但是请注意,这navigator.userAgent
也可能是欺骗性的——也就是说,客户实际上可以用任何字符串替换他们的userAgent
. 因此,无论我们从任何推断appName
或userAgent
应与一粒盐服用。
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var fullVersion = ''+parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
fullVersion = nAgt.substring(verOffset+6);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
fullVersion = nAgt.substring(verOffset+7);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) {
browserName = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
fullVersion=fullVersion.substring(0,ix);
majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
fullVersion = ''+parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion,10);
}
document.write(''
+'Browser name = '+browserName+'<br>'
+'Full version = '+fullVersion+'<br>'
+'Major version = '+majorVersion+'<br>'
+'navigator.appName = '+navigator.appName+'<br>'
+'navigator.userAgent = '+navigator.userAgent+'<br>');
回答by Shree
In c# you your browser name using:
在 c# 中,您的浏览器名称使用:
System.Web.HttpBrowserCapabilities browser = Request.Browser;
For details see a link.
有关详细信息,请参阅链接。
http://msdn.microsoft.com/en-us/library/3yekbd5b%28v=vs.100%29.aspx
http://msdn.microsoft.com/en-us/library/3yekbd5b%28v=vs.100%29.aspx
and in Client side:
并在客户端:
JQuery:
查询:
jQuery.browser
For details see a link:
详情见链接:
回答by Sintrias
I found a purely Javascript solution herethat seems to work for major browsers for both PC and Mac. I tested it in BrowserStack for both platforms and it works like a dream. The Javascript solution posted in this thread by Jason D'Souza is really nice because it gives you a lot of information about the browser, but it has an issue identifying Edge which seems to look like Chrome to it. His code could probably be modified a bit with this solution to make it work for Edge too. Here is the snippet of code I found:
我在这里找到了一个纯粹的 Javascript 解决方案,它似乎适用于 PC 和 Mac 的主要浏览器。我在 BrowserStack 中针对这两个平台对其进行了测试,它的工作原理就像做梦一样。Jason D'Souza 在此线程中发布的 Javascript 解决方案非常好,因为它为您提供了许多有关浏览器的信息,但它在识别 Edge 时遇到了问题,而 Edge 对它来说似乎看起来像 Chrome。他的代码可能会使用此解决方案进行一些修改,以使其也适用于 Edge。这是我找到的代码片段:
var browser = (function (agent) {
switch (true) {
case agent.indexOf("edge") > -1: return "edge";
case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)";
case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
case agent.indexOf("trident") > -1: return "ie";
case agent.indexOf("firefox") > -1: return "firefox";
case agent.indexOf("safari") > -1: return "safari";
default: return "other";
}
})(window.navigator.userAgent.toLowerCase());
console.log(window.navigator.userAgent.toLowerCase() + "\n" + browser);
回答by Hosam Aly
The browser discloses it in navigator.userAgent
. If you're using jQuery, you're better off using jQuery.browser
as @Rab Nawaz said. However, as the API documentation says, it's better to check for feature support if possible. Quoting the documentation:
浏览器在navigator.userAgent
. 如果您使用的是 jQuery,那么最好使用jQuery.browser
@Rab Nawaz 所说的那样。但是,正如 API 文档所说,如果可能,最好检查功能支持。引用文档:
We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser may be moved to a plugin in a future release of jQuery.
我们建议不要使用此属性;请尝试改用功能检测(请参阅jQuery.support)。jQuery.browser 可能会在 jQuery 的未来版本中移动到插件中。
Here is a code example:
这是一个代码示例:
function isIE() {
if (window.jQuery) {
return jQuery.browser.msie || false;
} else {
// adapted from jQuery's source:
return navigator.userAgent.toLowerCase().indexOf('msie') >= 0;
}
}
回答by Steven Dsouza
This is answered in
这是在回答
How to detect Safari, Chrome, IE, Firefox and Opera browser?
如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器?
Check this
fiddle.
检查this
小提琴。
Hope this helps.
希望这可以帮助。
回答by Jason D'Souza
This code will return "browser" and "browserVersion"
Works on 95% of 80+ browsers
此代码将返回 "browser" 和 "browserVersion"
适用于 80 多种浏览器中的 95%
var geckobrowsers;
var browser = "";
var browserVersion = 0;
var agent = navigator.userAgent + " ";
if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("like Gecko") != -1){
geckobrowsers = agent.substring(agent.indexOf("like Gecko")+10).substring(agent.substring(agent.indexOf("like Gecko")+10).indexOf(") ")+2).replace("LG Browser", "LGBrowser").replace("360SE", "360SE/");
for(i = 0; i < 1; i++){
geckobrowsers = geckobrowsers.replace(geckobrowsers.substring(geckobrowsers.indexOf("("), geckobrowsers.indexOf(")")+1), "");
}
geckobrowsers = geckobrowsers.split(" ");
for(i = 0; i < geckobrowsers.length; i++){
if(geckobrowsers[i].indexOf("/") == -1)geckobrowsers[i] = "Chrome";
if(geckobrowsers[i].indexOf("/") != -1)geckobrowsers[i] = geckobrowsers[i].substring(0, geckobrowsers[i].indexOf("/"));
}
if(geckobrowsers.length < 4){
browser = geckobrowsers[0];
} else {
for(i = 0; i < geckobrowsers.length; i++){
if(geckobrowsers[i].indexOf("Chrome") == -1 && geckobrowsers[i].indexOf("Safari") == -1 && geckobrowsers[i].indexOf("Mobile") == -1 && geckobrowsers[i].indexOf("Version") == -1)browser = geckobrowsers[i];
}
}
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("Gecko/") != -1){
browser = agent.substring(agent.substring(agent.indexOf("Gecko/")+6).indexOf(" ") + agent.indexOf("Gecko/")+6).substring(0, agent.substring(agent.substring(agent.indexOf("Gecko/")+6).indexOf(" ") + agent.indexOf("Gecko/")+6).indexOf("/"));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0" && agent.indexOf("Clecko/") != -1){
browser = agent.substring(agent.substring(agent.indexOf("Clecko/")+7).indexOf(" ") + agent.indexOf("Clecko/")+7).substring(0, agent.substring(agent.substring(agent.indexOf("Clecko/")+7).indexOf(" ") + agent.indexOf("Clecko/")+7).indexOf("/"));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "5.0"){
browser = agent.substring(agent.indexOf("(")+1, agent.indexOf(";"));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "4.0" && agent.indexOf(")")+1 == agent.length-1){
browser = agent.substring(agent.indexOf("(")+1, agent.indexOf(")")).split("; ")[agent.substring(agent.indexOf("(")+1, agent.indexOf(")")).split("; ").length-1];
} else if(agent.substring(agent.indexOf("Mozilla/")+8, agent.indexOf(" ")) == "4.0" && agent.indexOf(")")+1 != agent.length-1){
if(agent.substring(agent.indexOf(") ")+2).indexOf("/") != -1)browser = agent.substring(agent.indexOf(") ")+2, agent.indexOf(") ")+2+agent.substring(agent.indexOf(") ")+2).indexOf("/"));
if(agent.substring(agent.indexOf(") ")+2).indexOf("/") == -1)browser = agent.substring(agent.indexOf(") ")+2, agent.indexOf(") ")+2+agent.substring(agent.indexOf(") ")+2).indexOf(" "));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else if(agent.substring(0, 6) == "Opera/"){
browser = "Opera";
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
if(agent.substring(agent.indexOf("(")+1).indexOf(";") != -1)os = agent.substring(agent.indexOf("(")+1, agent.indexOf("(")+1+agent.substring(agent.indexOf("(")+1).indexOf(";"));
if(agent.substring(agent.indexOf("(")+1).indexOf(";") == -1)os = agent.substring(agent.indexOf("(")+1, agent.indexOf("(")+1+agent.substring(agent.indexOf("(")+1).indexOf(")"));
} else if(agent.substring(0, agent.indexOf("/")) != "Mozilla" && agent.substring(0, agent.indexOf("/")) != "Opera"){
browser = agent.substring(0, agent.indexOf("/"));
browserVersion = agent.substring(agent.indexOf(browser)+browser.length+1, agent.indexOf(browser)+browser.length+1+agent.substring(agent.indexOf(browser)+browser.length+1).indexOf(" "));
} else {
browser = agent;
}
alert(browser + " v" + browserVersion);
回答by balexandre
It's all about what you really want to do, but in times to come and right now, the best way is avoid browser detectionand check for features. like Canvas, Audio, WebSockets, etc through simple javascript calls or in your CSS, for me your best approach is use a tool like ModernizR:
这完全取决于您真正想做的事情,但在未来和现在,最好的方法是避免浏览器检测并检查功能。像Canvas、Audio、WebSockets等,通过简单的 javascript 调用或在你的 CSS 中,对我来说,你最好的方法是使用像ModernizR这样的工具:
Unlike with the traditional—but highly unreliable—method of doing “UA sniffing,” which is detecting a browser by its (user-configurable)
navigator.userAgent
property, Modernizr does actual feature detectionto reliably discern what the various browsers can and cannot do.
与传统但非常不可靠的“UA 嗅探”方法不同,该方法通过浏览器的(用户可配置的)
navigator.userAgent
属性检测浏览器,Modernizr 进行实际特征检测,以可靠地辨别各种浏览器可以做什么和不能做什么。
If using CSS, you can do this:
如果使用 CSS,您可以这样做:
.no-js .glossy,
.no-cssgradients .glossy {
background: url("images/glossybutton.png");
}
.cssgradients .glossy {
background-image: linear-gradient(top, #555, #333);
}
as it will load and append all features as a class name in the <html>
element and you will be able to do as you wish in terms of CSS.
因为它将加载并附加所有功能作为<html>
元素中的类名,您将能够在 CSS 方面随心所欲。
And you can even load files upon features, for example, load a polyfill js and css if the browser does not have native support
您甚至可以根据功能加载文件,例如,如果浏览器没有本机支持,则加载 polyfill js 和 css
Modernizr.load([
// Presentational polyfills
{
// Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
// Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Functional polyfills
{
// This just has to be truthy
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
},
// Run your analytics after you've already kicked off all the rest
// of your app.
'post-analytics.js'
]);
a simple example of requesting features from javascript:
从 javascript 请求功能的简单示例:
回答by Robin
Based on is.jsyou can write a helper file for getting browser name like this-
基于is.js,您可以编写一个帮助文件来获取这样的浏览器名称 -
const Browser = {};
const vendor = (navigator && navigator.vendor || '').toLowerCase();
const userAgent = (navigator && navigator.userAgent || '').toLowerCase();
Browser.getBrowserName = () => {
if(isOpera()) return 'opera'; // Opera
else if(isChrome()) return 'chrome'; // Chrome
else if(isFirefox()) return 'firefox'; // Firefox
else if(isSafari()) return 'safari'; // Safari
else if(isInternetExplorer()) return 'ie'; // Internet Explorer
}
// Start Detecting browser helpers functions
function isOpera() {
const isOpera = userAgent.match(/(?:^opera.+?version|opr)\/(\d+)/);
return isOpera !== null;
}
function isChrome() {
const isChrome = /google inc/.test(vendor) ? userAgent.match(/(?:chrome|crios)\/(\d+)/) : null;
return isChrome !== null;
}
function isFirefox() {
const isFirefox = userAgent.match(/(?:firefox|fxios)\/(\d+)/);
return isFirefox !== null;
}
function isSafari() {
const isSafari = userAgent.match(/version\/(\d+).+?safari/);
return isSafari !== null;
}
function isInternetExplorer() {
const isInternetExplorer = userAgent.match(/(?:msie |trident.+?; rv:)(\d+)/);
return isInternetExplorer !== null;
}
// End Detecting browser helpers functions
export default Browser;
And just import this file where you need.
只需在需要的地方导入此文件。
import Browser from './Browser.js';
const userBrowserName = Browser.getBrowserName() // return your browser name
// opera | chrome | firefox | safari | ie