Suche…
Einführung
Browser, wie sie sich weiterentwickelt haben, boten Javascript mehr Funktionen. Oft sind diese Funktionen jedoch nicht in allen Browsern verfügbar. Manchmal sind sie möglicherweise in einem Browser verfügbar, müssen jedoch in anderen Browsern veröffentlicht werden. In anderen Fällen werden diese Funktionen von verschiedenen Browsern unterschiedlich implementiert. Die Browsererkennung wird wichtig, um sicherzustellen, dass die von Ihnen entwickelte Anwendung reibungslos auf verschiedenen Browsern und Geräten ausgeführt wird.
Bemerkungen
Verwenden Sie, wenn möglich, die Funktionserkennung.
Es gibt einige Gründe, die Browsererkennung zu verwenden (z. B. dem Benutzer Anweisungen zur Installation eines Browser-Plugins oder zum Leeren des Cache-Speichers geben), im Allgemeinen wird jedoch die Featureerkennung als bewährte Methode betrachtet. Wenn Sie die Browsererkennung verwenden, stellen Sie sicher, dass diese unbedingt erforderlich ist.
Modernizr ist eine beliebte, leichte JavaScript-Bibliothek, die die Erkennung von Funktionen vereinfacht.
Feature-Erkennungsmethode
Diese Methode sucht nach browserspezifischen Dingen. Dies ist schwieriger zu fälschen, es ist jedoch nicht garantiert, dass es zukunftssicher ist.
// 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;
Erfolgreich getestet in:
- Firefox 0,8 - 44
- Chrome 1,0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6 - 11
- Kante - 20-25
Dank an Rob W
Bibliotheksmethode
Für manche wäre es einfacher, eine vorhandene JavaScript-Bibliothek zu verwenden. Dies liegt daran, dass es schwierig sein kann, sicherzustellen, dass die Browsererkennung korrekt ist. Daher kann es sinnvoll sein, eine funktionierende Lösung zu verwenden, falls eine verfügbar ist.
Eine beliebte Browsererkennungsbibliothek ist Bowser .
Anwendungsbeispiel:
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');
}
Benutzeragentenerkennung
Diese Methode ruft den Benutzeragenten ab und analysiert ihn, um den Browser zu finden. Der Name und die Version des Browsers werden über einen regulären Ausdruck aus dem Benutzerprogramm extrahiert. Basierend auf diesen beiden wird der <browser name> <version> des <browser name> <version> zurückgegeben.
Die vier Bedingungsblöcke, die auf den Benutzeragenten-Übereinstimmungscode folgen, sollen Unterschiede in den Benutzeragenten verschiedener Browser berücksichtigen. Im Falle einer Oper gibt es beispielsweise einen zusätzlichen Schritt zum Ignorieren dieses Teils, da die Chrome-Rendering-Engine verwendet wird.
Beachten Sie, dass diese Methode von einem Benutzer leicht gefälscht werden kann.
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(' ');
})();