Обнаружение браузера в JavaScript? [дубликат]
этот вопрос уже есть ответ здесь:
- как вы можете определить версию браузера? 23 ответов
Как определить точный браузер и версию с помощью JavaScript?
26 ответов
navigator.sayswho= (function(){
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();
Как следует из названия, это сообщит вам имя и номер версии, предоставленные браузером.
это удобно для сортировки результатов тестов и ошибок, когда вы тестируете новый код на нескольких браузерах.
Я рекомендую использовать крошечную библиотеку javascript Bowser, да нет r. Он основан на navigator.userAgent
и довольно хорошо протестирован для всех браузеров, включая iphone, android и т. д.
вы можете использовать просто сказать:
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');
}
Это то, что я написал, чтобы получить информацию о клиенте
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' : '';
}
вот как обнаружить браузеры в 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;
красота этого подхода заключается в том, что он опирается на свойства движка браузера, поэтому он охватывает даже производные браузеры, такие как Яндекс или Вивальди, которые практически совместимы с основными браузерами, чьи движки они используют. Исключением является Opera, которая полагается на нюхание агента пользователя, но сегодня (т. е. ver. 15 и выше) даже опера сама по себе только оболочка для Мигать.
обычно лучше избегать кода, специфичного для браузера, где это возможно. В JQuery $.support
свойство доступно для обнаружения поддержки определенных функций, а не полагаться на имя и версию браузера.
в Opera, например, вы можете подделать экземпляр internet explorer или firefox.
подробное описание JQuery.поддержку можно найти здесь: http://api.jquery.com/jQuery.support/
теперь устарел в соответствии с jQuery.
мы настоятельно рекомендуем использовать внешнюю библиотеку, такую как Modernizr вместо зависимости от свойств
jQuery.support
.
при кодировании веб-сайтов я всегда убеждаюсь, что базовая функциональность, такая как навигация, также доступна для пользователей, не являющихся js. Это может быть объектом обсуждения и может быть проигнорировано, если домашняя страница предназначена для специальной аудитории.
Это говорит вам все подробности о вашем браузере и его версии.
<!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>
вся информация о веб-браузере содержится в объекте navigator. Имя и версия есть.
var appname = window.navigator.appName;
источник: обнаружение браузера javascript
//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
поскольку 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;
})();
к сожалению, IE11 больше не имеет MSIE
в своем navigator.userAgent
:
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
Что касается того, почему вы хотите знать, какой браузер вы используете, это потому, что каждый браузер имеет свой собственный набор ошибок, и вы в конечном итоге реализации браузера и версии конкретных обходных путей, или сказать пользователю использовать другой браузер!
этой маленькая библиотека может помочь вам. Но имейте в виду, что обнаружение браузера не всегда является решением.
вот как я делаю пользовательский CSS для Internet Explorer:
в моем файле 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-файле y определите каждый другой стиль:
.ie10 .some-class span{
.......
}
.ie8 .some-class span{
.......
}
Если вы хотите функцию, которая возвращает браузер, а также версию, вот улучшение от исходного ответа:
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');
}
}
)();
при этом он также сохраняет результат локально, поэтому эта проверка не требуется запускать каждый раз.
вы можете использовать библиотеку jQuery для обнаружения версии браузера.
пример:
с помощью jQuery.браузер.версия
однако это имеет смысл, только если вы также используете другие функции jQuery. Добавление всей библиотеки только для обнаружения браузера кажется мне излишним.
дополнительная информация: http://api.jquery.com/jQuery.browser/
(вы должны прокрутить немного вниз)
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;
вы можете подробнее Как обнаружить браузер Safari, Chrome, IE, Firefox и Opera?
вместо жесткого кодирования веб-браузеров вы можете сканировать пользовательский агент, чтобы найти имя браузера:
navigator.userAgent.split(')').reverse()[0].match(/(?!Gecko|Version|[A-Za-z]+?Web[Kk]it)[A-Z][a-z]+/g)[0]
Я тестировал это на Safari, Chrome и Firefox. Дайте мне знать, если вы обнаружили, что это не работает в браузере.
- сафари:
"Safari"
- Chrome:
"Chrome"
- Firefox:
"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
Я знаю, что опаздываю на этот вопрос, но решил, что я брошу свои фрагменты здесь. Многие ответы здесь в порядке, и, как указывает один, обычно лучше использовать feature detection
вместо того, чтобы полагаться на userAgent
строку. Однако, если вы собираетесь пойти по этому маршруту, я написал полный фрагмент, а также альтернативную реализацию jQuery для замены depricated $.browser
.
ваниль JS
мой первый фрагмент просто добавляет четыре свойства
это то, что я использую:
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
для Google Chrome;ie9
-ie11
для IE;ie?
для старого или неизвестного IE;ed
для края;ff
для Firefox;sa
для сафари;op
для оперы. -
os
:mac
win7
win8
win10
winnt
winxp
winvista
linux
nix
-
mobile
:a
для Android;i
для iOS (iPhone iPad);w
для Windows Phone;b
для Blackberry;s
для незамеченных мобильных работает Safari;1
для других незамеченных мобильных устройств;0
для немобильных -
touch
:true
для сенсорных устройств, включая сенсорные ноутбуки / Ноутбуки, которые имеют мышь и сенсорный вместе;false
без сенсорной поддержки -
tablet
:true
илиfalse
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;
не совсем то, что вы хотите, но близко к нему:
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.chrome
аналогично window.opera
.
несколько раз нам нужен простой метод, чтобы проверить, является ли браузер IE или нет. Вот как это может быть:
var isMSIE = (/trident/i).test(navigator.userAgent);
if(isMSIE)
{
/* do something for ie */
}
else
{
/* do something else */
}
или упрощенный метод Шивы:
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 содержат строку MSIE в свойстве userAgent и могут быть захвачены ею.
Я нашел что-то интересное и более быстрый способ.
IE поддерживает navigator.systemLanguage
который возвращает "en-US", где другие браузеры возвращают undefined
.
<script>
var lang = navigator.systemLanguage;
if (lang!='en-US'){document.write("Well, this is not internet explorer");}
else{document.write("This is internet explorer");}
</script>
Я делаю эту небольшую функцию, надеюсь, что это поможет. Здесь вы можете найти последнюю версию 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"
}
ниже фрагмент кода покажет, как вы можете показать UI elemnts зависит от версии IE и браузера
$(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;
}
С помощью jQuery:
$.browser
дает вам что-то вроде:
Object {chrome: true, version: "26.0.1410.63", webkit: true}