Cet article résume et analyse les problèmes de compatibilité courants en JavaScript dans les navigateurs IE et Firefox. Partagez-le pour votre référence, comme suit:
Formulaire
document.formname.item ("itemname")IE: vous pouvez utiliser document.formname.item ("itemname") ou document.formname.elements ["elementName"]
Firefox: seulement document.formName.Elements ["elementName"]
Solution: utilisez document.formname.elements ["elementName"]
Objets de classe de collecte
IE: vous pouvez utiliser () ou [] pour obtenir des objets de classe de collecte;
Firefox: utilisez uniquement [] pour obtenir des objets de classe de collecte.
Solution: utilisez [] pour obtenir des objets de classe de collecte de manière unifiée.
Propriétés personnalisées
IE: Vous pouvez utiliser la méthode pour obtenir des attributs réguliers pour obtenir des attributs personnalisés, ou vous pouvez utiliser getAtTribute () pour obtenir des attributs personnalisés
Firefox: vous ne pouvez utiliser GetAttribute () que pour obtenir des propriétés personnalisées.
Solution: Obtenez uniformément des attributs personnalisés via getAttribute ().
Acquisition d'éléments
eval ("idname")IE: vous pouvez utiliser EVAL ("IDNAME") ou GetElementById ("idName") pour obtenir un objet HTML avec idName;
Firefox: vous ne pouvez utiliser que GetElementById ("idName") pour obtenir des objets HTML avec idName avec idName.
Solution: utilisez GetElementById ("idName") pour obtenir l'objet HTML avec ID comme idName.
Dénomination en double
Problème avec le même nom de variable qu'un certain ID d'objet HTML
IE: L'ID de l'objet HTML peut être utilisé directement comme nom de variable de l'objet subordonné du document, mais il ne peut pas être utilisé sous Firefox;
Firefox: vous pouvez utiliser le même nom de variable que l'ID d'objet HTML, mais vous ne pouvez pas dans IE.
Solution: utilisez document.getElementById ("idname") au lieu de document.idname. Il est préférable de ne pas prendre de noms de variables avec le même ID d'objet HTML pour réduire les erreurs; Lorsque vous déclarez les variables, ajoutez VAR pour éviter l'ambiguïté.
const
IE: Utilisez uniquement le mot clé VAR pour définir les variables.
Firefox: vous pouvez utiliser le mot clé const ou le mot clé var pour définir les variables.
Solution: utilisez le mot clé VAR pour définir uniformément les variables.
Type d'entrée
Problème d'attribut d'entrée.
IE: L'attribut Input.Type est en lecture seule.
Firefox: l'attribut Input.Type est lu et écrit.
window.event
Window.event ne peut fonctionner que sous IE, pas dans Firefox, car l'événement Firefox ne peut être utilisé que sur la scène où l'événement se produit.
Firefox: un événement doit être ajouté à partir de la source de passage des paramètres. IE ignore ce paramètre et utilise Window.Event pour lire l'événement.
Solution:
<Script Language = "JavaScript"> Function Fun (e) {E = E? e: (window.event? window.event: null); } </ script>event.x et event.y
Description: Sous IE, l'objet uniforme a des attributs x et y, mais n'a pas d'attributs pagex et pagey; Sous Firefox, l'objet uniforme a des attributs Pagex et Pagey, mais n'a pas d'attributs x et y.
Solution: utilisez MX (mx = event.x? Event.x: event.pagex;) au lieu de Event.x sous IE ou Event.pagex sous Firefox.
event.srcelement
IE: L'objet Event a une propriété Srcelement, mais n'a pas de propriété cible;
Firefox: Même l'objet a une propriété cible, mais pas de propriété Srcelement.
Solution: utilisez obj (obj = event.srcelement? Event.srcelement: event.target;) au lieu de Event.srcelement sous IE ou Event.target sous Firefox. Veuillez également prêter attention aux problèmes de compatibilité de l'événement.
window.location.href
C'est-à-dire ou firefox2.0.x: vous pouvez utiliser Window.Location ou Window.location.href;
Firefox1.5.x: seule fenêtre. La localisation est utilisée
Solution: utilisez Window.Location au lieu de Window.Location.href.
Windows modal et non modal
IE: les fenêtres modales et non modales peuvent être ouvertes via ShowModaldialog et ShowModelessDialog
Firefox: Non!
Solution: utilisez Window.Open (pageurl, nom, paramètres) pour ouvrir une nouvelle fenêtre.
Si vous avez besoin de transmettre des paramètres dans la fenêtre enfant vers la fenêtre parent, vous pouvez utiliser Window.pener dans la fenêtre enfant pour accéder à la fenêtre parent. Par exemple: var parwin = window.opener; parwin.document.getElementById ("aqing"). Value = "aqing";
cadre
La trame suivante est un exemple:
<frame src = "xxx.html" id = "frameid" name = "FrameName" />
1. Accédez à l'objet de trame:
[L'objet renvoyé dans IE est un objet, et le type spécifique sera affiché dans FF, tel que: fenêtre d'objet]
IE: Utilisez Window.frameid ou Window.framename pour accéder à cet objet de trame. FrameId et FrameName peuvent avoir le même nom.
Firefox: seule Window.Framename peut être utilisée pour accéder à cet objet de trame.
Dans IE et Firefox, vous pouvez utiliser Window.Document.GetElementById ("FrameId") pour accéder à cet objet de trame.
2. Contenu du cadre de commutation:
Dans IE et Firefox, vous pouvez utiliser Window.Document.getElementById ("TestFrame"). Src = "xxx.html" ou Window.FrameName.Location = "xxx.html" pour changer le contenu du cadre.
Si vous avez besoin de transmettre les paramètres dans le cadre à la fenêtre parent (notez qu'il ne s'agit pas d'un ouvreur, mais d'un cadre parent), vous pouvez utiliser le parent dans le cadre pour accéder à la fenêtre parent. Par exemple: parent.document.form1.filename.value = "a";
Corps
IE: le corps doit exister après que la balise corporelle est complètement lue par le navigateur.
Firefox: le corps existe avant que l'étiquette corporelle ne soit entièrement lue par le navigateur.
Méthode de délégation d'événements
IE: La copie de code est la suivante: document.body.onload = inject; // fonction inject () a été implémenté avant cela
Firefox: la copie de code est la suivante: document.body.onload = inject ();
Élément parent
La différence entre Firefox et IE Element Parent (Parentement)
IE: Obj.pare-ParentElement
Firefox: obj.parentnode
Solution: Parce que Firefox et IE prennent en charge DOM, l'utilisation d'OBJ.parentNode est un bon choix.
Curseur du pointeur de souris
curseur: main vs curseur: pointeur
Firefox: la main non prise en charge
IE: pointeur de support
Solution: utilisez uniformément le pointeur
Texte de contenu
InnerText fonctionne normalement dans IE. Cependant, InnerText ne fonctionne pas dans Firefox, TextContent est requis.
Solution:
if (navigator.appname.indexof ("explorateur")> -1) {document.getElementById ('élément'). innerText = "mon texte"; } else {document.getElementById ('élément'). textc; }Opération sur la table
IE, Firefox et d'autres navigateurs ont des opérations différentes sur les étiquettes de table. Dans IE, il n'est pas autorisé à attribuer des valeurs innerHTML à la table et à TR. Lorsque vous utilisez JS pour ajouter un TR, la méthode de l'appendchild n'est pas utile.
Solution:
// Ajouter une ligne vierge à la table: var row = otable.insertrow (-1); var cell = document.CreateElement ("TD"); Cell.innerhtml = ""; Cell.classname = "A"; Row.ApendChild (cellule);Collection d'options
Fonctionnement de la collection d'options sur Select
En plus de [], selectName.options.item () est également possible. En outre, selectName.options.length, selectName.options.add / supprimer peut être utilisé dans les deux navigateurs.
* Notez que l'élément est attribué après ADD, sinon il échouera.
Xmlhttp
if (window.xmlhttpRequest) {xmlhttp = new xmlHttpRequest (); } else if (window.activexObject) {// code pour ie xmlhttp = new activeXObject ("Microsoft.xmlhttp"); } if (xmlhttp) {xmlhttp.onreadystateChange = xmlhttpchange; xmlhttp.open ("get", url, true); xmlhttp.send (); }Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des erreurs JavaScript et des compétences de débogage", "Résumé de l'utilisation de l'opération mathématique JavaScript", "Résumé des compétences d'opération JSON en JavaScript" Les compétences de recherche Javascript "STACKING STAPELLESS", "Résumé des effets de recherche javascript et réciproque Compétences "," Résumé des structures de données JavaScript et des compétences en algorithme "et" Résumé de l'algorithme de traversée JavaScript et des compétences "
J'espère que cet article sera utile à la programmation JavaScript de tous.