Les problèmes de compatibilité des navigateurs sont une partie facile à ignorer mais la plus importante dans le développement réel. Avant de parler des problèmes de compatibilité des anciennes versions des navigateurs, nous devons d'abord comprendre ce qu'est la détection des capacités. Il s'agit de détecter si le navigateur a de telles capacités, c'est-à-dire pour déterminer si le navigateur actuel prend en charge les attributs ou les méthodes à appeler. Voici quelques brèves présentations.
1.
1) Les fonctions du texte inner
2) Prise en charge du navigateur en texte intérieur avant IE8
3) Ancienne version intérieure de Firefox Support
4) La nouvelle version du navigateur prend en charge les deux méthodes
1 // La version ancienne des navigateurs est compatible avec InnerText et InnerContent2 if (element.TextContent) {3 return element.TextContent; 4} else {5 return element.innerText; 6}2. Obtenez des problèmes de compatibilité des nœuds / éléments de frère
1) Brother Nœuds, tous les navigateurs prennent en charge
①NextSibling le nœud de frère suivant, qui peut être un nœud sans élément; Un nœud de texte sera obtenu
② Précéaire du nœud frères précédent peut être un nœud non élémentaire; le nœud de texte sera obtenu
2) Brother Elements, IE8 n'a pas soutenu auparavant
① Précédents, obtenez le prochain élément du prochain frère prochain et ignore les blancs
②NextElelementsibling Obtenez le prochain élément de frère adjacent et ignore les blancs
// Browser compatible // Obtenez la fonction d'élément de frères et sœurs suivante GetNextElement (élément) {// Détection de capacité if (élément.NextElementSibling) {return element.NextElelementSibling; } else {var node = element.NextSibling; while (node && node.nodeType! == 1) {node = node.nextibling; } Node de retour; }} / *** renvoie l'élément précédent * @param élément * @returns {*} * / function getPreviousElement (élément) {if (element.PreviousElementSibling) {return element.PreviousElelementSibling; } else {var el = element.PreviousSibling; while (el && el.nodeType! == 1) {el = el.previoussibling; } return el; }} / *** Browser compatible avec le premier élément FirstElementChild * @param parent * @returns {*} * / function getFirstelement (parent) {if (parent.firstElementChild) {return parent.firstelementChild; } else {var el = parent.firstchild; while (el && el.nodeType! == 1) {el = el.nextsibling; } return el; }} / *** renvoie le dernier élément * @param parent * @returns {*} * / function getlastetement (parent) {if (Parent.LastetementChild) {return Parent.LastetementChild; } else {var el = parent.lastchild; while (el && el.nodeType! == 1) {el = el.previoussibling; } return el; }} / *** Obtenez tous les éléments de frère de l'élément actuel * @param élément * @returns {array} * / function sibling (élément) {if (! Element) return; Var Elements = []; var el = element.previousSibling; while (el) {if (el.NodeType === 1) {elements.push (el); } el = el.previoussibling; } el = element.PreviousSibling; while (el) {if (el.NodeType === 1) {elements.push (el); } el = el.nextsibling; } el = element.PreviousSibling; } Éléments de retour;}3. Array.filter ();
// tester tous les éléments avec la fonction spécifiée et créer un nouveau tableau contenant tous les éléments qui ont réussi le test
// compatible avec l'ancien environnement if (! Array.prototype.filter) {array.prototype.filter = function (fun / *, thisarg * /) {"use strict"; if (this === void 0 || this === null) lancez new typeError (); var t = objet (this); var len = t.length >>> 0; if (typeof fun! == "function") lancez new typeError (); var res = []; var thisarg = arguments.length> = 2? arguments [1]: vide 0; pour (var i = 0; i <len; i ++) {if (i in t) {var val = t [i]; // Remarque: Techniquement, cela devrait objeter.defineProperty à // L'index suivant, car push peut être affecté par // propriétés sur object.prototype et array.prototype. // Mais cette méthode est nouvelle, et les collisions doivent être // rares, alors utilisez l'alternative plus compatible. if (fun.call (thisarg, val, i, t)) res.push (val); }} return res; };}4. Array.ForEach ();
// Travel
// compatible avec les anciens environnements // étapes de production de l'ECMA-262, édition 5, 15.4.4.18// Référence: http://es5.github.io/#x15.4.4.18if (! Array.prototype.Forach) {array.prototype.forach = function (rappel, thisarg) {var t, k; if (this == null) {lancer new typeError ('Ceci est nul ou non'); } // 1. Soit O le résultat de l'appel ToObject () passant le // | ceci | valeur comme argument. var o = objet (this); // 2. Soit LenValue le résultat de l'appel de la méthode GET () interne // de O avec l'argument "longueur". // 3. Soit Len touint32 (Lenvalue). var len = o.length >>> 0; // 4. Si IsCallable (rappel) est faux, lancez une exception TypeError. // Voir: http://es5.github.com/#x9.11 if (typeof callback! == "function") {throw new typeError (callback + 'n'est pas une fonction'); } // 5. Si ce thisarg était fourni, soit t ce thisarg; Sinon, laissez // t n'est pas défini. if (arguments.length> 1) {t = thisarg; } // 6. Soit k 0 k = 0; // 7. répéter, tandis que k <len while (k <len) {var kvalue; // un. Soit Pk être tostring (k). // Ceci est implicite pour les opérateurs LHS de l'opérateur in // b. Soit KPresent le résultat de l'appel de la méthode interne Hasproperty // de O avec l'argument PK. // Cette étape peut être combinée avec c // c. Si kpresent est vrai, alors si (k en o) {// i. Soit Kvalue le résultat de l'appel de la méthode GET interne // de O avec l'argument PK. kvalue = o [k]; // ii. Appelez l'appel de la méthode interne de rappel avec t comme // la liste de cette valeur et des arguments contenant kvalue, k et o. callback.call (t, kvalue, k, o); } // d. Augmenter K par 1. K ++; } // 8. retour non défini};}5. Événement d'inscription
.AdDeventListener = fonction (type, écouteur, useCapture) {};
// le premier nom de l'événement paramètre
// La deuxième fonction de gestionnaire d'événements de paramètre (écouteur)
// Le troisième paramètre True capture la fausse bulle
// il ne sera pris en charge qu'après IE9
// compatible avec les anciens environnements
var eventTools = {addEventListener: function (élément, eventName, écouteur) {// détection de capacité if (élément.addeventListener) {element.addeventListener (eventName, écouteur, false); } else if (element.attachevent) {element.attachevent ("on" + eventName, écouteur); } else {élément ["on" + eventName] = écouteur; }}, // Si vous souhaitez supprimer des événements, vous ne pouvez pas utiliser la fonction anonyme retireEventListener: function (élément, eventName, écouteur) {if (element.removeEventListener) {element.reMoveEventListener (EventName, écouteur, false); } else if (element.detachevent) {// ie8 avant de vous inscrire.attachevent et de supprimer des événements.Detachevent Element.Detachevent ("on" + eventName, écouteur); } else {element ["on" + eventName] = null; }}};6. Objet de l'événement
1) Le paramètre de l'événement E est l'objet de l'événement, la méthode d'acquisition standard
btn.onclick = fonction (e) {}
2) étape de l'événement E.Eventphase, IE8 ne l'a pas soutenu avant
3) E.Target est toujours l'objet qui déclenche l'événement (bouton cliqué)
i) Avant ie8 srcelement
ii) Compatible du navigateur
var cible = e.target || window.event.srcelement;
// Obtenez un objet d'événement compatible avec le navigateur getEvent: fonction (e) {return e || window.event; // moyen standard d'obtenir un objet d'événement E; Window.Event la voie d'obtenir un objet d'événement avant IE8} // compatible avec Target GetTarget: Fonction (E) {return e.target || e.srcelement; }7. Obtenez la position de la souris sur la page
① Position dans la zone visuelle: e.clientx e.clienty
② Emplacement dans le document:
i) e.pagex e.pagey
ii) Compatible du navigateur
var scrolltop = document.DocumentElement.ScrollTop || document.body.scrolltop; var pagey = e.clienty + scrolltop;
8. Obtenez la distance pour faire défiler
// Browser compatible var scrolltop = document.documentElement.scrolltop || document.body.scrolltop;
9. Annuler la sélection du texte
// Compatible avec le navigateur Window.getSelection? window.getSelection (). RemoveallRanges (): document.selection.empty ();
[Résumé] Ce n'est qu'un résumé partiel, et vous rencontrerez également divers problèmes de compatibilité du navigateur pendant le développement réel. Différents navigateurs rencontreront également différents problèmes d'adaptation sur le PC et les téléphones portables. Ceux-ci attendent que les chaussures des enfants découvrent et résument ~~ j'espère que cela pourra vous aider. Veuillez me donner quelques conseils sur les lacunes ~~~
La brève analyse ci-dessus des problèmes de compatibilité des navigateurs en JavaScript est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.