Dans le développement de la frontale du site Web, les problèmes de compatibilité des navigateurs nous ont déjà fait nous précipiter, et je ne sais pas combien de problèmes cela nous fera naître. La compatibilité du navigateur est le premier problème que le cadre de développement frontal doit résoudre. Pour résoudre le problème de compatibilité, vous devez d'abord déterminer avec précision le type et la version du navigateur.
JavaScript est la langue principale du développement frontal. Nous pouvons juger le type et la version du navigateur en écrivant des programmes JavaScript. Il existe généralement deux façons de juger les types de navigateurs en JavaScript. L'un consiste à les distinguer en fonction des attributs uniques de divers navigateurs, et l'autre est de juger en analysant l'attribut utilisateur du navigateur. Dans de nombreux cas, une fois que la valeur a déterminé le type de navigateur, il est nécessaire de juger la version du navigateur pour gérer le problème de compatibilité. La version du navigateur peut généralement être connue en analysant l'utilisateur du navigateur.
Analysons d'abord les caractéristiques de divers navigateurs et de leurs utilisateurs.
C'est-à-dire
Seuls IE prend en charge la création de contrôles ActiveX, donc elle a quelque chose que les autres navigateurs n'ont pas, qui est la fonction ActiveXObject. Tant que vous jugez que l'objet Window a une fonction ActiveXObject, vous pouvez clairement déterminer que le navigateur actuel est IE. Les utilisateurs typiques pour chaque version de IE sont les suivants:
Mozilla / 4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla / 4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla / 4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla / 4.0 (compatible; MSIE 5.0; Windows NT)
Parmi eux, le numéro de version est le numéro après MSIE.
Incendier
Les éléments DOM dans Firefox ont une fonction GetBoxObjectFor, qui est utilisé pour obtenir la position et la taille de l'élément DOM (la fonction GetBoundingClientRect correspondant à IE). Ceci est unique à Firefox. Vous pouvez dire que le navigateur actuel est Firefox. Les utilisateurs de plusieurs versions de Firefox sont à peu près les suivants:
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
Parmi eux, le numéro de version est le numéro après Firefox.
Opéra
Opera fournit un logo de navigateur spécial, qui est la propriété Window.Opera. UserAgent typique pour Opera est le suivant:
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) Opéra 8.0
Parmi eux, le numéro de version est un numéro proche de l'opéra.
Safari
Il existe une fonction OpenDatabase dans le navigateur Safari que les autres navigateurs n'ont pas, qui peuvent être utilisés comme drapeau pour juger Safari. Les utilisateurs typiques pour Safari sont les suivants:
Mozilla / 5.0 (Windows; U; Windows NT 5.2) Applewebkit / 525.13 (KHTML, comme Gecko) Version / 3.1 Safari / 525.13
Mozilla / 5.0 (iPhone; U; CPU comme Mac OS X) Applewebkit / 420.1 (KHTML, comme Gecko) Version / 3.0 Mobile / 4A93 Safari / 419.3
Son numéro de version est un numéro après la version.
Chrome
Chrome a une fonction MessageEvent, mais Firefox l'a également. Heureusement, Chrome n'a pas la fonction GetBoxObjectFor de Firefox, et il peut être jugé avec précision en fonction de cette condition. Actuellement, l'utilisateur de Chrome est:
Mozilla / 5.0 (Windows; U; Windows NT 5.2) Applewebkit / 525.13 (KHTML, comme Gecko) Chrome / 0.2.149.27 Safari / 525.13
Parmi eux, le numéro de version n'est qu'après Chrome.
Fait intéressant, l'utilisateur de Chrome contient également les caractéristiques de Safari, c'est peut-être la base que Chrome exécute toutes les applications Apple Browser.
Tant que nous comprenons les informations ci-dessus, nous pouvons baser ces caractéristiques sur le type de navigateur et sa version. Nous enregistrerons les résultats du jugement dans l'espace du nom du SYS et deviendrons les informations de base du logo du cadre frontal pour les futurs programmes à lire. Si vous déterminez le navigateur, l'espace de noms SYS aura un attribut du nom du navigateur et sa valeur est le numéro de version du navigateur. Par exemple, si IE 7.0 est déterminé, la valeur de Sys.ie est de 7,0; Si Firefox 3.0 est déterminé, la valeur de SYS.Firefox est de 3,0. Voici le code pour déterminer le navigateur:
[Ctrl + A Sélectionnez All Remarque: Si vous devez introduire un JS externe, vous devez actualiser pour exécuter]
Nous avons mis notre jugement sur IE en premier, car IE a le plus d'utilisateurs, suivi de Firefox. Juger le type de navigateur dans l'ordre des utilisateurs peut améliorer l'efficacité du jugement et faire un travail moins inutile. La raison pour laquelle Chrome est placé à la troisième place est que nous prédisons que Chrome deviendra bientôt le troisième navigateur avec des parts de marché. Parmi eux, lors de l'analyse de la version du navigateur, des expressions régulières sont utilisées pour disséquer les informations de version.
Si votre javascript est très bon, vous pouvez également écrire le code de jugement précédent comme ceci:
[Ctrl + A Sélectionnez All Remarque: Si vous devez introduire un JS externe, vous devez actualiser pour exécuter]
Cela peut rendre le code JavaScript plus rationalisé. Bien sûr, la lisibilité est un peu pire, cela dépend de la valeur de l'efficacité ou de la maintenabilité.
La méthode de jugement des navigateurs utilisant différentes fonctionnalités est plus rapide que l'analyse des utilisateurs avec des expressions régulières, mais ces fonctionnalités peuvent varier avec la version du navigateur. Par exemple, si la caractéristique d'origine d'un navigateur a réussi sur le marché, d'autres navigateurs peuvent également ajouter cette fonctionnalité, ce qui fait disparaître la caractéristique unique du navigateur et provoquant l'échec de notre jugement. Par conséquent, une approche relativement sûre consiste à juger le type de navigateur en analysant les fonctionnalités de l'utilisateur. De plus, juger les informations de version nécessite l'analyse de l'utilisateur du navigateur.
En analysant les informations utilisateur de divers navigateurs, il n'est pas difficile d'obtenir des expressions régulières qui distinguent divers navigateurs et leurs versions. De plus, le jugement du type et de la version du navigateur peut être fait en un. Ainsi, nous pouvons écrire le code suivant:
[Ctrl + A Sélectionnez All Remarque: Si vous devez introduire un JS externe, vous devez actualiser pour exécuter]
Parmi eux, une expression de jugement comme "...? ...: ..." est utilisée pour simplifier le code. La condition de jugement est une déclaration d'affectation qui complète non seulement l'appariement des expressions régulières et la copie du résultat, mais utilise également directement le jugement conditionnel. Les informations de version suivantes doivent être extraites des résultats de correspondance précédents, qui est un code très efficace.
Les codes ci-dessus sont tous des pré-recherches pour créer un cadre frontal et testés et transmis cinq navigateurs principaux. À l'avenir, il vous suffit de juger un certain navigateur sous la forme de if (sys.ie) ou if (sys.firefox), et vous n'avez qu'à juger la version du navigateur sous la forme de if (sys.ie == '8.0') ou if (sys.firefox == '3.0'), ce qui est toujours très élégant à exprimer.
Le projet de cadre frontal a été lancé, tout dépend du processus et des résultats ...
Le rédacteur en chef de Wulin.com a réglé quelques codes pour vous:
La copie de code est la suivante:
Var Browser = New Object ();
Browser.ismozilla = (typeof document.implementation! = 'Undefined') && (typeof document.implementation.CreateDocument! = 'Undefined') && (typeof htmlDocument! = 'Undefined');
Browser.isie = window.activexObject? vrai: false;
Browser.isfirefox = (Navigator.UserAgent.tolowerCase (). Indexof ("Firefox")! = - 1);
Browser.issafari = (Navigator.UserAgent.tolowerCase (). IndexOf ("Safari")! = - 1);
Browser.isopera = (Navigator.UserAgent.TolowerCase (). IndexOf ("Opera")! = - 1);
Fonction Check () {
alert (Browser.isie? 'ie': 'pas ie');
alerte (Browser.isfirefox? 'Firefox': «pas Firefox»);
alert (Browser.issafari? 'Safari': 'pas safari');
alert (Browser.isopera? 'Opera': 'pas opéra');
}
window.onload = chèque;
La copie de code est la suivante:
fonction isBrowser () {
var sys = {};
var ua = navigator.useragent.tolowercase ();
var s;
(s = ua.match (/ msie ([/d.
(s = ua.match (/ firefox // ([/ d.] +) /))? sys.firefox = s [1]:
(s = ua.match (/ chrome // ([/ d.] +) /))? sys.chrome = s [1]:
(s = ua.match (/ opéra. ([/ d.] +) /))? Sys.Opera = s [1]:
(s = ua.match (/ version // ([/ d.] +). * safari /))? sys.safari = s [1]: 0;
if (sys.ie) {// js est jugé comme le navigateur IE
alert ('// www.vevb.com' + sys.ie);
if (sys.ie == '9.0') {// js est jugé comme IE 9
} else if (sys.ie == '8.0') {// js est jugé comme ie 8
}autre{
}
}
if (sys.firefox) {// js est jugé comme le navigateur Firefox (Firefox)
alert ('// www.vevb.com' + sys.firefox);
}
if (sys.chrome) {// js est jugé comme le navigateur Google Chrome
alert ('// www.vevb.com' + sys.chrome);
}
if (sys.opera) {// js est jugé comme navigateur d'opéra
alert ('// www.vevb.com' + sys.opera);
}
if (sys.safari) {// js est jugé comme un navigateur Apple Safari
alert ('// www.vevb.com' + sys.safari);
}
}
Partagez une méthode de fonction pour obtenir le type de navigateur et le numéro de version du navigateur via jQuery. Le code jQuery spécifique est le suivant:
La copie de code est la suivante:
$ (document) .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;}
alerte (binfo);
});
À partir de la version 1.9, jQuery a supprimé $ .browser et $ .browser.version et l'a remplacé par la méthode $ .Support. Si vous devez comprendre $ .Support, veuillez vous référer à:
jQuery 1.9 Utilisez $.