Szukaj…
Wprowadzenie
Przeglądarki, w miarę ich ewolucji, oferowały więcej funkcji Javascript. Ale często te funkcje nie są dostępne we wszystkich przeglądarkach. Czasami mogą być dostępne w jednej przeglądarce, ale jeszcze w innych przeglądarkach. W innych przypadkach funkcje te są wdrażane w różny sposób w różnych przeglądarkach. Wykrywanie przeglądarki staje się ważne, aby zapewnić, że tworzona aplikacja działa płynnie w różnych przeglądarkach i urządzeniach.
Uwagi
W miarę możliwości korzystaj z funkcji wykrywania.
Istnieje kilka powodów, dla których warto stosować wykrywanie przeglądarki (np. Podawanie wskazówek dla użytkownika, jak zainstalować wtyczkę do przeglądarki lub wyczyścić pamięć podręczną), ale generalnie wykrywanie funkcji jest uważane za najlepszą praktykę. Jeśli używasz wykrywania przeglądarki, upewnij się, że jest to absolutnie konieczne.
Modernizr to popularna, lekka biblioteka JavaScript, która ułatwia wykrywanie funkcji.
Metoda wykrywania cech
Ta metoda sprawdza istnienie rzeczy specyficznych dla przeglądarki. Trudniej byłoby to sfałszować, ale nie ma gwarancji, że będzie to dowód na przyszłość.
// 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;
Z powodzeniem przetestowany w:
- Firefox 0,8 - 44
- Chrome 1.0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6–11
- Krawędź - 20-25
Podziękowania dla Roba W.
Metoda biblioteczna
Dla niektórych łatwiejszym rozwiązaniem byłoby użycie istniejącej biblioteki JavaScript. Wynika to z faktu, że sprawdzenie, czy wykrywanie przeglądarki jest prawidłowe, może być trudne, dlatego warto zastosować działające rozwiązanie, jeśli jest ono dostępne.
Jedną z popularnych bibliotek do wykrywania przeglądarek jest Bowser .
Przykład użycia:
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');
}
Wykrywanie agenta użytkownika
Ta metoda pobiera klienta użytkownika i analizuje go w celu znalezienia przeglądarki. Nazwa i wersja przeglądarki są wyodrębniane z klienta użytkownika za pomocą wyrażenia regularnego. Na podstawie tych dwóch zwracana jest <browser name> <version> .
Cztery bloki warunkowe następujące po kodzie dopasowania agenta użytkownika mają na celu uwzględnienie różnic w agentach użytkownika różnych przeglądarek. Na przykład w przypadku opery, ponieważ wykorzystuje ona silnik renderowania Chrome , istnieje dodatkowy krok zignorowania tej części.
Pamiętaj, że użytkownik może łatwo sfałszować tę metodę.
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(' ');
})();
Kredyt dla Kennebecu