У меня есть 5 дополнений / расширений для FF, Chrome, IE, Opera и Safari.
Как я могу распознать браузер пользователя и перенаправить (после нажатия кнопки установки), чтобы загрузить соответствующее дополнение?
javascript
browser-detection
FrankC
источник
источник
Ответы:
Поиск в Google для надежного обнаружения в браузере часто приводит к проверке строки агента пользователя. Этот метод не надежен, потому что подделать это значение тривиально.
Я написал метод для обнаружения браузеров по типу утки .
Используйте метод обнаружения браузера только в том случае, если это действительно необходимо, например, для показа инструкций для конкретного браузера по установке расширения. По возможности используйте функцию обнаружения.
Демо: https://jsfiddle.net/6spj1059/
Анализ надежности
Предыдущий метод зависит от свойств рендеринга (
-moz-box-sizing
и-webkit-transform
) , чтобы обнаружить браузер. Эти префиксы будут в конечном итоге отброшены, поэтому, чтобы сделать обнаружение еще более надежным, я переключился на характеристики браузера:document.documentMode
.StyleMedia
конструктор. Исключение Трайдента оставляет нас с ЭджемInstallTrigger
chrome
объект, содержащий несколько свойств, включая документированныйchrome.webstore
объект.chrome.webstore
устарело и не определено в последних версияхSafariRemoteNotification
, что было введено после версии 7.1, чтобы охватить все Safaris от 3.0 и выше.window.opera
существует уже много лет, но будет удален, когда Opera заменит свой двигатель Blink + V8 (используется Chromium).chrome
объект определен (ноchrome.webstore
не определен). Поскольку Opera изо всех сил пытается клонировать Chrome, для этой цели я использую сниффинг пользовательского агента.!!window.opr && opr.addons
может использоваться для обнаружения Opera 20+ (вечнозеленых).CSS.supports()
появился в Blink, когда Google включил Chrome 28. Это, конечно, тот же Blink, что и в Opera.Успешно протестировано в:
источник
window.chrome.webstore
здесь не определено. Не проверял это с помощью расширений Firefox.is.js
упомянутое в другом месте работает как в Chrome, так и в Firefox Extensions.isSafari
не работает с Safari 10. Я собираюсь доказать, что это плохое решение (не то, чтобы у меня было хорошее). Нет гарантии, что многие из проверок не будут удалены ИЛИ не будут добавлены другими браузерами. Каждый сайт, который использовал этот код для проверки Safari, просто ломался с обновлениями MacOS Sierra или Safari 10 :(isSafari
не работает под<iframe>
Safari 10.1.2Вы можете попробовать следующий способ проверить версию браузера.
И если вам нужно знать только версию IE Browser, вы можете следовать приведенному ниже коду. Этот код хорошо работает для версии IE6 до IE11
источник
chrome
ключевое слово в useragent. Пример сафари UserAgent -mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17
if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
Я знаю, что использование библиотеки lib для этого может быть излишним, но просто чтобы обогатить поток, вы можете проверить способ is.js сделать это:
источник
is.js
и проверьте, как они это делают.Вот несколько известных библиотек, которые обрабатывают обнаружение браузера по состоянию на декабрь 2019 года.
Bowser от lancedikson - 4 065 ★ s - последнее обновление 2 октября 2019 г. - 4.8KB
* поддерживает Edge на основе хрома
Platform.js от bestiejs - 2,550 ★ s - последнее обновление 14 апреля 2019 г. - 5.9KB
Браузер jQuery от gabceb - 504 ★ s - последнее обновление 23 ноября 2015 г. - 1.3KB
Detect.js (в архиве) от darcyclarke - 522 ★ s - последнее обновление 26 октября 2015 г. - 2.9KB
Обнаружение браузера (в архиве) от QuirksMode - последнее обновление 14 ноября 2013 г. - 884B
Известные упоминания:
Дальнейшее чтение
источник
В случае, если кто-то найдет это полезным, я превратил ответ Роба В. в функцию, которая возвращает строку браузера, вместо того, чтобы плавать вокруг множества переменных. Поскольку браузер также не может измениться без повторной загрузки, я сделал его кеширующим, чтобы предотвратить необходимость его обработки при следующем вызове функции.
источник
window.chrome.webstore
было удалено в Chrome 71, поэтому этот подход больше не работает.Короткий вариант
источник
Вот скорректированная версия ответа Роба в 2016 году, включая Microsoft Edge и обнаружение Blink:
( редактировать : я обновил ответ Роба выше с этой информацией.)
Прелесть этого подхода в том, что он опирается на свойства движка браузера, поэтому он охватывает даже производные браузеры, такие как Яндекс или Вивальди, которые практически совместимы с основными браузерами, движки которых они используют. Исключением является Opera, которая полагается на сниффинг пользовательского агента, но сегодня (т.е. версия 15 и выше) даже Opera сама по себе является лишь оболочкой для Blink.
источник
!!window.MSAssertion;
Тест не работает для меня в пограничных бета через удаленный рабочий стол. Возвращает ложь.MSAssertion
Трюк настроен на версию 25. Но так как многие разработчики полагаются на виртуальные машины, я постараюсь настроить эту старую версию. Хороший звонок. Спасибо.StyleMedia
(с большой буквы) специфичен для IE и Edge и, похоже, никуда не денется.Вы можете использовать
try
иcatch
использовать различные сообщения об ошибках браузера. IE и edge были перепутаны, но я использовал утку, набранную из Rob W (на основе этого проекта здесь: https://www.khanacademy.org/computer-programming/i-have-opera/2395080328 ).источник
Спасибо всем. Я протестировал фрагменты кода здесь в последних браузерах: Chrome 55, Firefox 50, IE 11 и Edge 38, и я придумал следующую комбинацию, которая работала для меня для всех из них. Я уверен, что это можно улучшить, но это быстрое решение для тех, кто нуждается:
Он добавляет CSS-класс в HTML с именем браузера.
источник
Понятия не имею, полезно ли это кому-то, но вот вариант, чтобы сделать TypeScript счастливым.
}
navigator.userAgent
сообщает вам обо всех возможных браузерах, которые у вас есть ... Так что это действительно ненадежно, единственный случай, когда он будет работать, - это если у пользователя только один браузер.Обнаружение браузеров на настольных и мобильных устройствах: Edge, Opera, Chrome, Safari, Firefox, IE
Спасибо @nimesh пользователь: 2063564
источник
Существует также менее «хакерский» метод, который работает для всех популярных браузеров. Google включил проверку браузера в свою библиотеку закрытия . В частности, посмотрите на
goog.userAgent
иgoog.userAgent.product
. Таким образом, вы также будете в курсе, если что-то меняется в том, как себя представляют браузеры (учитывая, что вы всегда запускаете последнюю версию компилятора закрытия).источник
Если вам нужно узнать, какая числовая версия какого-либо конкретного браузера, вы можете использовать следующий фрагмент. В настоящее время вам сообщат версию Chrome / Chromium / Firefox:
источник
UAParser - это одна из облегченных библиотек JavaScript, позволяющая идентифицировать браузер, механизм, ОС, ЦП и тип / модель устройства из строки userAgent.
Доступен CDN. Здесь я включил пример кода для обнаружения браузера с помощью UAParser.
Теперь вы можете использовать значение
result.browser
для условного программирования вашей страницы.Source Tutorial: Как определить браузер, движок, ОС, процессор и устройство, используя JavaScript?
источник
источник
Это объединяет как оригинальный ответ Роба, так и обновление Пилау за 2016 год.
источник
Здесь вы узнаете, какой браузер работает.
источник
Мы можем использовать ниже используемые методы
источник
источник
Простая, единственная строка кода JavaScript даст вам имя браузера:
источник
navigator.userAgent
сообщает вам обо всех возможных браузерах, которые у вас есть ... Так что это действительно ненадежно, единственный случай, когда он будет работать, - это если у пользователя только один браузер.