Bei der Entwicklung des Front-End-Website haben wir uns bereits zum Anstieg der Browser-Kompatibilitätsprobleme gemacht, und ich weiß nicht, wie viel Ärger es dazu veranlassen wird, geboren zu werden. Die Browserkompatibilität ist das erste Problem, das das Front-End-Entwicklungsrahmen lösen muss. Um das Kompatibilitätsproblem zu lösen, müssen Sie zunächst den Typ und die Version des Browsers genau bestimmen.
JavaScript ist die Hauptsprache der Front-End-Entwicklung. Wir können den Typ und die Version des Browsers beurteilen, indem wir JavaScript -Programme schreiben. Es gibt im Allgemeinen zwei Möglichkeiten, Browsertypen in JavaScript zu beurteilen. Einer soll sie basierend auf den einzigartigen Attributen verschiedener Browser unterscheiden, und das andere ist zu beurteilen, indem sie das Attribut "Benutzeragent des Browsers" analysiert. In vielen Fällen muss nach dem Wert der Browsertyp festgelegt werden, dass die Browserversion so beurteilt wird, dass das Kompatibilitätsproblem behandelt wird. Die Browserversion kann im Allgemeinen durch die Analyse des Benutzers des Browsers bekannt sein.
Lassen Sie uns zunächst die Eigenschaften verschiedener Browser und ihrer Benutzeragenten analysieren.
Dh
Nur der IE unterstützt das Erstellen von ActiveX -Steuerelementen, daher hat sie etwas, das andere Browser nicht haben, nämlich die ActiveXObject -Funktion. Solange Sie beurteilen, dass das Fensterobjekt über eine ActiveXObject -Funktion verfügt, können Sie deutlich feststellen, dass der aktuelle Browser IE ist. Die typischen Benutzeragenten für jede Version von IE 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)
Unter ihnen ist die Versionsnummer die Nummer nach MSIE.
Firefox
Die DOM -Elemente in Firefox verfügen über eine GetboxObjectFor -Funktion, mit der die Position und Größe des DOM -Elements (die GetboundingClientRect -Funktion entspricht, die IE entspricht). Dies ist einzigartig für Firefox. Sie können erkennen, dass der aktuelle Browser Firefox ist. Die Benutzeragenten mehrerer Versionen von Firefox sind 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
Unter ihnen ist die Versionsnummer die Nummer nach Firefox.
Oper
Opera bietet ein spezielles Browser -Logo, das die Eigenschaft von Fenster ist. Opera. Der typische Benutzeragent für die Opera ist 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 X; u; EN) Opera 8.0
Unter ihnen ist die Versionsnummer eine Nummer in der Nähe der Opera.
Safari
Im Safari -Browser gibt es eine Opendatabase -Funktion, die andere Browser nicht haben, die als Flagge zur Beurteilung von Safari verwendet werden können. Typische Benutzeragenten für Safari sind wie folgt:
Mozilla/5.0 (Windows; u; Windows NT 5.2) Applewebkit/525.13 (khtml, wie Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; u; cpu wie Mac OS X) Applewebkit/420.1 (KHTML, Like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
Die Versionsnummer ist eine Nummer nach der Version.
Chrom
Chrome hat eine MessageEvent -Funktion, aber Firefox hat es auch. Glücklicherweise hat Chrome keine Firefox -GetboxObjectFor -Funktion und kann anhand dieser Erkrankung genau beurteilt werden. Derzeit lautet Chrome's Benutzeragent:
Mozilla/5.0 (Windows; u; Windows NT 5.2) Applewebkit/525.13 (KHTML, wie Gecko) Chrom/0.2.149.27 Safari/525.13
Unter ihnen ist die Versionsnummer erst nach Chrome.
Interessanterweise enthält die Benutzeragent von Chrome auch die Eigenschaften von Safari. Möglicherweise ist dies die Grundlage für Chrome, alle Apple -Browser -Anwendungen auszuführen.
Solange wir die oben genannten Informationen verstehen, können wir diese Eigenschaften auf den Browsertyp und seine Version stützen. Wir werden die Urteilsergebnisse im Sys-Namensraum speichern und die grundlegenden Logoinformationen des Front-End-Frameworks für zukünftige Programme zum Lesen werden. Wenn Sie den Browser bestimmen, hat der SYS -Namespace ein Attribut des Browser -Namens und sein Wert ist die Versionsnummer des Browsers. Wenn beispielsweise IE 7.0 bestimmt wird, beträgt der Wert von sys.ie 7,0; Wenn Firefox 3.0 bestimmt wird, beträgt der Wert von sys.firefox 3,0. Hier ist der Code, um den Browser zu bestimmen:
[Strg+A Wählen Sie alle Hinweise aus: Wenn Sie externe JS einführen müssen, müssen Sie aktualisieren, um auszuführen]
Wir haben zuerst über IE beurteilt, weil der IE die meisten Benutzer hat, gefolgt von Firefox. Die Beurteilung des Browsertyps in der Reihenfolge der Benutzer kann die Effizienz der Beurteilung verbessern und weniger nutzlose Arbeiten leisten. Der Grund, warum Chrome den dritten Platz platziert, ist, dass wir vorhersagen, dass Chrome bald der dritte Browser mit Marktanteil werden wird. Unter ihnen werden bei der Analyse der Browserversion regelmäßige Ausdrücke verwendet, um die Versionsinformationen zu sezieren.
Wenn Ihr JavaScript sehr gut ist, können Sie auch den vorherigen Urteilscode wie diesen schreiben:
[Strg+A Wählen Sie alle Hinweise aus: Wenn Sie externe JS einführen müssen, müssen Sie aktualisieren, um auszuführen]
Dies kann den JavaScript -Code stärker gestoppt werden. Natürlich ist die Lesbarkeit etwas schlechter, es hängt davon ab, ob Sie Effizienz oder Wartbarkeit bewerten.
Die Methode zur Beurteilung von Browsern mit unterschiedlichen Funktionen ist schneller als die Analyse von Benutzern mit regelmäßigen Ausdrücken. Diese Funktionen können jedoch mit der Browserversion variieren. Wenn beispielsweise die ursprünglich einzigartige Funktion eines Browsers auf dem Markt Erfolg erzielt hat, können auch andere Browser diese Funktion hinzufügen, wodurch das einzigartige Merkmal des Browsers verschwindet und unser Urteilsvermögen fehlschlägt. Ein relativ sicherer Ansatz besteht daher darin, den Browsertyp zu beurteilen, indem die Funktionen im Benutzeragent analysiert werden. Darüber hinaus erfordert die Beurteilung von Versionsinformationen das Parsen des Benutzers des Browsers.
Durch die Analyse der Benutzeragentinformationen verschiedener Browser ist es nicht schwierig, regelmäßige Ausdrücke zu erhalten, die verschiedene Browser und ihre Versionen unterscheiden. Darüber hinaus kann das Urteil über Browsertyp und -version in einem gemacht werden. Wir können also den folgenden Code schreiben:
[Strg+A Wählen Sie alle Hinweise aus: Wenn Sie externe JS einführen müssen, müssen Sie aktualisieren, um auszuführen]
Unter ihnen wird ein Urteilsausdruck wie "...? ... ..." verwendet, um den Code zu vereinfachen. Die Beurteilungsbedingung ist eine Zuweisungserklärung, die nicht nur die Übereinstimmung der regulären Ausdrücke und das Kopieren des Ergebnisses abschließt, sondern auch direkt das bedingte Urteil verwendet. Die nachfolgenden Versionsinformationen müssen nur aus den vorherigen Matching -Ergebnissen extrahiert werden, was sehr effizient ist.
Die oben genannten Codes sind alle Vorforschungen zum Erstellen eines Front-End-Frameworks und wurden getestet und weitergegeben. In Zukunft müssen Sie nur einen bestimmten Browser in Form von if (sys.ie) oder if (sys.firefox) beurteilen, und Sie müssen die Browserversion nur in Form von if (sys.ie == '8.0') oder if (sys.firefox == '3.0') beurteilen, was immer noch sehr elegant ist.
Das Front-End-Framework-Projekt wurde gestartet, alles hängt vom Prozess und den Ergebnissen ab ...
Der Herausgeber von Wulin.com hat ein paar Codes für Sie ausgeklärt:
Die Codekopie lautet wie folgt:
var browser = new Object ();
Browser.ismozilla = (typeof document.implementation!
Browser.isie = window.activeXObject? wahr: falsch;
Browser.isfirefox = (navigator.useragent.tolowerCase (). Indexof ("Firefox")! =-1);
Browser.issafari = (navigator.useragent.tolowerCase (). Indexof ("safari")! =-1);
Browser.isopera = (navigator.useragent.tolowerCase (). Indexof ("Opera")! =-1);
Funktion check () {
Alert (Browser.isie? 'IE': 'nicht ie');
Alert (Browser.isfirefox? 'Firefox': 'nicht Firefox');
Alert (Browser.Issafari? 'Safari': 'nicht safari');
Alert (Browser.isopera? 'Opera': 'nicht Opera');
}
window.onload = check;
Die Codekopie lautet wie folgt:
Funktion isBrowser () {
var sys = {};
var ua = navigator.useragent.tolowerCase ();
var S;
(s = ua.match (/msie ([/d. weibliche+)/)?sys.ie=s?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;
if (sys.ie) {// js wird als IE -Browser beurteilt
alert ('// www.vevb.com'+sys.ie);
if (sys.ie == '9.0') {// js wird als dh 9 beurteilt
} else if (sys.ie == '8.0') {// js wird als dh 8 beurteilt
}anders{
}
}
if (sys.firefox) {// js wird als Firefox (Firefox) -Browser beurteilt
alert ('// www.vevb.com'+sys.firefox);
}
if (sys.chrome) {// js wird als Google Chrome Browser beurteilt
alert ('// www.vevb.com'+sys.chrome);
}
if (sys.opera) {// js wird als Operbrowser beurteilt
alert ('// www.vevb.com'+sys.opera);
}
if (sys.safari) {// js wird als Apple Safari Browser beurteilt
alert ('// www.vevb.com'+sys.safari);
}
}
Teilen Sie eine Funktionsmethode, um den Browsertyp und die Browserversionsnummer über JQuery zu erhalten. Der spezifische JQuery -Code lautet wie folgt:
Die Codekopie lautet wie folgt:
$ (Dokument) .Ready (function () {
varbrow = $. Browser;
varbinfo = "";
if (Brow.msie) {binfo = "Microsoft InternetExplorer"+Brow.version;}
if (Brow.mozilla) {Binfo = "Mozillafirefox"+Brow.version;}
if (Brow.safari) {binfo = "applesafari"+brow.version;}
if (Brow.opera) {binfo = "Opera"+Brow.version;}
Alert (Binfo);
});
Ab Version 1.9 entfernte JQuery $ .browser und $ .browser.version und ersetzte es durch die $ .Support -Methode. Wenn Sie $ .Support verstehen müssen, beziehen Sie sich bitte an:
JQuery 1.9 Verwenden Sie $ .Support anstelle von $ .browser -Methode