Résumé de certains problèmes de compatibilité et sujets aux erreurs dans js

Nous avons également rencontré de nombreux problèmes de compatibilité avec js. Cet article partagera avec vous un article résumant certains problèmes de compatibilité et sujets aux erreurs dans js. Il a une bonne valeur de référence. j'espère que cela pourra aider tout le monde.

1. Liés aux attributs

Nous appelons généralement les attributs et les propriétés des attributs, mais ce sont en effet des concepts différents,

Caractéristiques Il apparaîtra dans le texte HTML, et le la modification des caractéristiques apparaîtra définitivement dans le HTML externe de l'élément, et les caractéristiques n'existent que dans le nœud de l'élément ; l'attribut

(propriété) sert à modifier l'objet JS, sauf pour le navigateur intégré Sauf pour certaines fonctionnalités, d'autres opérations d'attribut n'affecteront pas le texte HTML.

1. IE6/7 ne fait pas de distinction entre les attributs et les caractéristiques

D'autres navigateurs feront la distinction entre les attributs et les caractéristiques, mais IE67 ne fait pas la distinction entre eux. Sous IE67, nous ne pouvons utiliser que le nom de l'attribut. pour supprimer des Caractéristiques, même si ces deux noms sont souvent identiques, il existe toujours des différences.

2. IE6/7 ne peut pas utiliser getAttribute/setAttribute pour faire fonctionner des fonctionnalités dont la valeur n'est pas une chaîne

Dans les navigateurs modernes, getAttribute renverra certainement la chaîne correspondante en HTML, tandis qu'IE67 renvoie les résultats. sont imprévisibles, donc sous IE67, nous devons utiliser AttributeNode pour faire fonctionner les attributs.

3. IE6/7/8 ne peut pas obtenir de texte CSS via l'attribut de style

Ce problème devrait être la séquelle d'IE6/7 ne faisant pas la distinction entre les attributs et les caractéristiques lors de l'obtention de l'attribut de style, Utilisez simplement elem.style.cssText.

4. IE6/7 analysera les URL relatives en URL absolues

Ce problème amène même l'attribut src vide sous IE6/7 à générer des requêtes répétées. Vous pouvez utiliser getAttribute('href/ src. ', 4).

5. Le comportement par défaut des caractéristiques des éléments est différent

Il y aura de nombreux bugs de ce type. Par exemple, dans certains anciens navigateurs webkit, la valeur par défaut de la case à cocher/radio est "" , tandis que Pas activé. Dans certains anciens navigateurs Webkit, le premier élément de la sélection ne sera pas sélectionné.

2. Opérations de style

Normalement, les styles incluent l'obtention et la définition de styles en ligne et l'obtention des styles calculés des éléments

1. les autres navigateurs ne prennent pas en charge

background-position-x/y peut être utilisé pour dégradé facilement la position d'une image. Si elle n'est pas prise en charge, nous pouvons envisager d'utiliser l'attribut d'analyse background-position pour la gérer.

2. IE6/7 ne prend pas en charge l'attribut opacity

Vous pouvez obtenir le même effet via le filtre alpha, mais n'oubliez pas de déclencher la mise en page haslayout de l'élément.

3. IE6/7/8 laissera par erreur les nœuds générés par clone hériter de certains attributs

Par exemple, l'arrière-plan, si vous en modifiez un ou deux, ils seront modifiés en même temps. .

4. Différentes façons d'obtenir le style calculé

IE6/7/8 utilise elem.currentStyle tandis que d'autres navigateurs utilisent la fonction window.getComputedStyle.

5. Différentes méthodes de pixellisation

La pixelisation fait référence à la conversion de distances dont les unités ne sont pas des pixels en pixels pour faciliter les calculs. À proprement parler, il ne s’agit pas d’un problème de compatibilité, mais il peut être utilisé de manière généralisée. Dans IE6/7/8, nous pouvons utiliser elem.runtimeStyle avec pixelLeft pour le traitement.

Les navigateurs modernes peuvent utiliser l'attribut width.

6. Quelques comportements de BUG lors de l'obtention de CSS

Dans les navigateurs principaux de Webkti, la marge droite se passe souvent mal.

3. Opération de requête

La transmission de requête fait référence à la recherche d'un ensemble d'éléments à travers certaines chaînes caractéristiques ou à la détermination si les éléments satisfont la chaîne.

1. IE6/7 ne fait pas de distinction entre l'identifiant et le nom

Lors de l'utilisation de getElementById et getElementsByName sous IE6/7, les éléments avec le même identifiant ou le même nom que la valeur donnée seront renvoyés à la fois. en même temps. Étant donné que le nom est généralement convenu par le backend, lorsque nous écrivons du JS, nous devons nous assurer que l'identifiant ne duplique pas le nom.

2. IE6/7 ne prend pas en charge getElementsByClassName et querySelectorAll

Ces deux fonctions sont prises en charge depuis IE8, donc sous IE6/7, nous ne pouvons en fait utiliser que getElementByTagName.

3. IE6/7 ne prend pas en charge getElementsByTagName('*') et renverra les nœuds non-éléments

Soit ne pas utiliser *, soit écrire une fonction pour le filtrer vous-même.

4. querySelectorAll sous IE8 n'est pas convivial pour les sélecteurs d'attributs

Presque tous les attributs prédéfinis du navigateur ont des problèmes, essayez d'utiliser des attributs personnalisés ou de ne pas utiliser de sélecteurs d'attributs.

5. querySelectorAll ne prend pas en charge les pseudo-classes sous IE8

Parfois, les pseudo-classes sont très utiles, mais IE8 ne les prend pas en charge : first, :last, :even, :. odd, :eq, :nth, :lt, :gt ne sont pas des pseudo-classes et nous ne devons à aucun moment les utiliser.

6. La fonction matches d'IE9 ne peut pas gérer les éléments qui ne sont pas sur l'arborescence DOM

Tant que l'élément n'est pas sur l'arborescence DOM, il retournera définitivement false. Il n'est pas possible de jeter l'élément dans le corps puis de le supprimer après la correspondance. Supprimez-le, bien sûr, nous pouvons également écrire notre propre fonction de correspondance pour éviter la redistribution.

4. Opérations sur les événements

Habituellement, lorsque tout le monde pose des questions sur la compatibilité de JS, la première réaction sera attachEvent et addEventListener, mais il y a encore de nombreux détails sur la différence entre ces deux fonctions.

1. Les objets événementiels sont différents

addEventListener est l'objet actuel vers lequel l'événement bouillonne, tandis que attachEvent est une fenêtre.

. Les objets paramètres d'événement sont différents

Assurez-vous de noter que la fonction liée à attachEvent a le paramètre e, n'écrivez pas e = e || des deux Il existe de nombreuses différences, telles que le bouton ou la sorcière, si la page Y est prise en charge ou non, etc.

2. L'incident du rouleau maléfique

Le support des événements de roue est un gâchis, les règles sont les suivantes :
IE6-11 chrome mousewheel wheelDetla down-120 up 120

firefox DOMMouseScroll détail down 3 up-3

detlaY de la roue Firefox suivant 3 up-3

deltaY de la roue IE9-11 down 40 up-40

deltaY de la roue chromée down 100 up-100

Trois majeurs. événements sans bulles

Les événements focus/flou de tous les navigateurs ne bouillonnent pas Heureusement, la plupart des navigateurs prennent en charge les événements focusin/focusout, mais ce foutu Firefox ne le prend même pas en charge.

L'événement submit ne bouillonne pas sous IE678.

Sous IE678, l'événement de changement ne sera déclenché qu'après le flou.

Nous n'avons aucun moyen efficace pour résoudre ces trois problèmes, nous ne pouvons les traiter que par le déclenchement de simulations.

4. a.click()

Cette méthode est dangereuse dans de nombreux navigateurs. Une fois exécutée, même si le comportement par défaut est bloqué, la page sautera toujours.

5. Opérations sur les nœuds

Les opérations sur les nœuds font généralement référence à la copie, à la génération d'un nœud ou au déplacement de l'emplacement d'un nœud.

1.. innerHTML

Lorsque IE6/7/8 utilise innerHTML, il doit y avoir un nœud de texte devant, sinon de nombreuses balises seront perdues. De plus, dans de nombreux cas, l'utilisation de innerHTML entraînera des erreurs dans l'attribut defaultValue.

2. Tbody inutile

IE6/7/8 ajoutera automatiquement un tbody vide à une table vide

3 L'événement attachEvent sera copié lors du clonage de Node

.

Et à moins d'enregistrer les événements que nous lions, nous n'avons aucun moyen de les dissocier.

Recommandations associées :

Problèmes courants de compatibilité des navigateurs en HTML et CSS

Analyse détaillée des performances de compatibilité en JavaScript

Explication détaillée des méthodes de fonctionnement des chaînes JavaScript et exemples de compatibilité des navigateurs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!