Поиск…
Вступление
Браузеры, как они развивались, предложили больше возможностей для Javascript. Но часто эти функции недоступны во всех браузерах. Иногда они могут быть доступны в одном браузере, но все же должны быть выпущены в других браузерах. В других случаях эти функции реализуются по-разному разными браузерами. Обнаружение браузера становится важным для обеспечения бесперебойной работы разрабатываемого приложения в разных браузерах и устройствах.
замечания
Используйте функцию обнаружения, когда это возможно.
Есть некоторые причины для использования обнаружения браузера (например, предоставление указаний пользователя о том, как установить плагин для браузера или очистить их кеш), но, как правило, определение функции считается лучшей практикой. Если вы используете обнаружение браузера, убедитесь, что это абсолютно неприглядно.
Modernizr - популярная, легкая библиотека JavaScript, которая упрощает определение функций.
Метод определения функции
Этот метод ищет наличие специфических для браузера вещей. Это было бы труднее подделать, но не гарантировано быть будущим доказательством.
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// At least Safari 3+: "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
Успешно протестировано в:
- Firefox 0.8 - 44
- Chrome 1.0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6 - 11
- Край - 20-25
Кредит Робу
Метод библиотеки
Более простой подход для некоторых - это использовать существующую библиотеку JavaScript. Это связано с тем, что может оказаться сложным гарантировать правильность определения браузера, поэтому имеет смысл использовать рабочее решение, если оно доступно.
Одна популярная библиотека для обнаружения браузера - Bowser .
Пример использования:
if (bowser.msie && bowser.version >= 6) {
alert('IE version 6 or newer');
}
else if (bowser.firefox) {
alert('Firefox');
}
else if (bowser.chrome) {
alert('Chrome');
}
else if (bowser.safari) {
alert('Safari');
}
else if (bowser.iphone || bowser.android) {
alert('Iphone or Android');
}
Обнаружение агента пользователя
Этот метод получает пользовательский агент и анализирует его, чтобы найти браузер. Имя и версия браузера извлекаются из пользовательского агента через регулярное выражение. На основе этих двух, возвращается <browser name> <version> .
Четыре условных блока, следующих за кодом соответствия пользовательского агента, предназначены для учета различий в пользовательских агентах разных браузеров. Например, в случае оперы, поскольку он использует механизм рендеринга Chrome , есть дополнительный шаг, игнорирующий эту часть.
Обратите внимание, что этот метод может быть легко подделан пользователем.
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(' ');
})();
Кредит кеннебек