Wissen Sie, wie viele Browser es auf der Welt gibt? Neben den vier bekannten Browsern IE, Firefox, Opera und Safari gibt es weltweit fast hundert Browser.
Browserkompatibilität ist das erste Problem, das vom Front-End-Entwicklungsframework gelöst wird. Um das Kompatibilitätsproblem zu lösen, müssen Sie zunächst den Browsertyp und seine Version genau bestimmen.
JavaScript ist die Hauptsprache für die Frontend-Entwicklung. Wir können den Typ und die Version des Browsers bestimmen, indem wir JavaScript-Programme schreiben. Es gibt im Allgemeinen zwei Möglichkeiten für JavaScript, den Browsertyp zu bestimmen: Die eine basiert auf den eindeutigen Attributen verschiedener Browser und die andere wird durch die Analyse des userAgent-Attributs des Browsers bestimmt. In vielen Fällen muss nach der Wertbestimmung des Browsertyps die Browserversion ermittelt werden, um Kompatibilitätsprobleme zu lösen. Die Browserversion kann im Allgemeinen nur durch Analyse des UserAgents des Browsers ermittelt werden.
Lassen Sie uns zunächst die Eigenschaften verschiedener Browser und ihrer UserAgents analysieren.
IE
Nur der IE unterstützt die Erstellung von ActiveX-Steuerelementen, daher verfügt er über etwas, das andere Browser nicht haben, nämlich die ActiveXObject-Funktion. Solange festgestellt wird, dass die ActiveXObject-Funktion im Fensterobjekt vorhanden ist, kann eindeutig festgestellt werden, dass der aktuelle Browser IE ist. Die typischen UserAgents für jede IE-Version sind wie folgt:
Mozilla/4.0 (kompatibel; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (kompatibel; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (kompatibel; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (kompatibel; MSIE 5.0; Windows NT)
Wobei die Versionsnummer die Nummer nach MSIE ist.
Firefox
Die DOM-Elemente in Firefox verfügen über eine getBoxObjectFor-Funktion, mit der die Position und Größe des DOM-Elements ermittelt wird (die entsprechende Funktion im IE ist die getBoundingClientRect-Funktion). Dies gibt es nur bei Firefox. Wenn Sie es beurteilen, können Sie erkennen, dass der aktuelle Browser Firefox ist. Die UserAgents mehrerer Firefox-Versionen lauten ungefähr wie folgt:
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
Wobei die Versionsnummer die Nummer nach Firefox ist.
Opera
Opera bietet ein spezielles Browser-Flag, das window.opera-Attribut. Der typische UserAgent von Opera lautet wie folgt:
Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/ 5.0 (Macintosh; PPC Mac OS
Safari
Es gibt eine openDatabase-Funktion im Safari-Browser, die andere Browser nicht haben und die als Zeichen für die Beurteilung von Safari verwendet werden kann. Der typische UserAgent für Safari lautet wie folgt:
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/ 5.0 (iPhone; U; CPU wie Mac OS
Chrome
Chrome verfügt über eine MessageEvent-Funktion, Firefox jedoch auch. Glücklicherweise verfügt Chrome jedoch nicht über die getBoxObjectFor-Funktion von Firefox. Unter dieser Bedingung kann der Chrome-Browser dennoch genau bestimmt werden. Derzeit ist der userAgent von Chrome:
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, wie Gecko) Chrome/0.2.149.27 Safari/525.13
Unter ihnen: Die Versionsnummer in Chrome ist nur eine Zahl dahinter.
Interessanterweise enthält der UserAgent von Chrome auch Safari-Funktionen. Möglicherweise ist dies die Grundlage für Chrome, um alle Apple-Browseranwendungen auszuführen.
Solange wir die oben genannten Informationen verstehen, können wir den Browsertyp und seine Version anhand dieser Merkmale beurteilen. Wir werden die Beurteilungsergebnisse im Sys-Namespace speichern und zu den grundlegenden Flag-Informationen des Front-End-Frameworks werden, damit zukünftige Programme sie lesen können. Wenn der Browser bestimmt ist, verfügt der Sys-Namespace über ein Attribut mit dem Namen des Browsers und sein Wert ist die Versionsnummer des Browsers. Wenn beispielsweise IE 7.0 ermittelt wird, beträgt der Wert von Sys.ie 7,0; wenn Firefox 3.0 ermittelt wird, beträgt der Wert von Sys.firefox 3,0. Das Folgende ist der Code zur Bestimmung des Browsers:
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox/([d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys .chrome = ua.match(/chrome/([d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match (/ opera.([d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version/([d. ]+ )/)[1];
//Test unten
if(Sys.ie) document.write('IE: '+Sys.ie) ;
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys. chrome );
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+ Sys .safari);
Wir beurteilen den IE an erster Stelle, da der IE die meisten Benutzer hat, gefolgt von Firefox. Die Bestimmung der Browsertypen in der Reihenfolge der Benutzeranzahl kann die Effizienz der Beurteilung verbessern und unnötigen Aufwand reduzieren. Der Grund, warum Chrome den dritten Platz belegt, liegt darin, dass wir davon ausgehen, dass Chrome in Bezug auf den Marktanteil bald der drittgrößte Browser sein wird. Unter anderem werden bei der Analyse der Browserversion reguläre Ausdrücke verwendet, um die Versionsinformationen zu extrahieren.
Wenn Sie gut in JavaScript sind, können Sie den vorherigen Beurteilungscode auch so schreiben:
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([d.]+)/)[1] :
document. getBoxObjectFor ? Sys.firefox = ua.match(/firefox/([d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor ? chrome/([d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([d.]+)/)[1] :
window.openDatabase ? Sys.safari = ua.match(/version/([d.]+)/)[1] : 0;
/ / Test unten
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: ' +Sys. firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera : '+ Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
Dies kann den JavaScript-Code rationalisieren. Natürlich ist die Lesbarkeit etwas schlechter, je nachdem, ob man Wert auf Effizienz oder Wartbarkeit legt.
Verwenden Sie unterschiedliche Merkmale, um den Browser zu bestimmen. Obwohl dies schneller ist als die Verwendung regulärer Ausdrücke zur Analyse von userAgent, können sich diese Merkmale mit der Browserversion ändern. Wenn sich beispielsweise eine einzigartige Funktion eines Browsers auf dem Markt durchsetzt, können andere Browser diesem Beispiel folgen und diese Funktion hinzufügen, was dazu führt, dass die einzigartigen Funktionen des Browsers verschwinden und unser Urteilsvermögen beeinträchtigt wird. Daher besteht ein relativ sicherer Ansatz darin, den Browsertyp durch Parsen der Merkmale in userAgent zu bestimmen. Darüber hinaus erfordert die Beurteilung der Versionsinformationen ohnehin das Parsen des userAgent des Browsers.
Durch die Analyse der UserAgent-Informationen verschiedener Browser ist es nicht schwierig, die regulären Ausdrücke zu finden, die verschiedene Browser und ihre Versionen unterscheiden. Darüber hinaus kann die Beurteilung von Browsertyp und -version vollständig integriert werden. Wir können also den folgenden Code schreiben:
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :
(s = ua. match (/firefox/([d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome/([d.]+)/) ) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0;
/ /Test unten
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write(' Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
Unter diesen werden Beurteilungsausdrücke wie „... ? ... : ...“ verwendet, um den Code zu vereinfachen. Die Beurteilungsbedingung ist eine Zuweisungsanweisung, die nicht nur den Abgleich regulärer Ausdrücke und das Kopieren der Ergebnisse abschließt, sondern auch direkt als bedingte Beurteilung dient. Die nachfolgenden Versionsinformationen müssen nur aus den vorherigen Übereinstimmungsergebnissen extrahiert werden. Dies ist ein sehr effizienter Code.
Der obige Code ist eine Vorrecherche für den Aufbau eines Front-End-Frameworks und wurde auf den fünf wichtigsten Browsern getestet. Von nun an müssen Sie nur noch if(Sys.ie) oder if(Sys.firefox) verwenden, um einen bestimmten Browser zu beurteilen, und Sie müssen nur noch if(Sys.ie == '8.0′) oder if(Sys.firefox) verwenden. firefox == '3.0') und andere Formen sind immer noch sehr elegant auszudrücken.
