1. Document.formName.item ("itemname") Problème
Description du problème: dans IE, vous pouvez utiliser document.formName.item ("itemname") ou document.formname.elements ["elementName"]; Dans Firefox, vous ne pouvez utiliser Document.formName.Elements ["ElementName"].
Solution: utilisez Document.formName.Elements ["ElementName"] de manière unifiée.
2. Problème d'objet de collecte
Description du problème: dans IE, vous pouvez utiliser () ou [] pour obtenir l'objet de classe de collection; Dans Firefox, vous ne pouvez utiliser [] que pour obtenir l'objet de classe de collecte.
Solution: utilisez [] pour obtenir des objets de classe de collecte de manière unifiée.
3. Problèmes d'attribut personnalisés
Description du problème: dans IE, vous pouvez utiliser la méthode d'obtention d'attributs réguliers pour obtenir des attributs personnalisés, ou vous pouvez utiliser GetAtTribute () pour obtenir des attributs personnalisés; Dans Firefox, vous ne pouvez utiliser GetAttribute () que pour obtenir des attributs personnalisés.
Solution: obtenez uniformément des attributs personnalisés via getAttribute ().
4. Problème d'évaluation ("idname")
Description du problème: dans IE, vous pouvez utiliser EVAL ("idName") ou getElementById ("idName") pour obtenir un objet HTML avec idName; Dans Firefox, vous ne pouvez utiliser GetElementById ("idName") que pour obtenir un objet HTML avec IDNAME.
Solution: utilisez GetElementById ("idName") pour obtenir l'objet HTML avec ID comme idName.
5. Le problème du nom de la variable et l'ID d'un certain objet HTML
Description du problème: Sous IE, l'ID de l'objet HTML peut être utilisé directement comme nom de variable de l'objet subordonné du document, mais pas dans Firefox; Sous Firefox, le nom de variable qui est le même que l'ID d'objet HTML peut être utilisé, mais 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 le mot-clé VAR pour éviter l'ambiguïté.
6. Problème const
Description du problème: Dans Firefox, vous pouvez utiliser le mot clé const ou le mot clé var pour définir les constantes; Dans IE, vous ne pouvez utiliser que le mot clé VAR pour définir les constantes.
Solution: utilisez le mot clé VAR pour définir uniformément les constantes.
7. Le problème de l'attribut d'entrée.
Description du problème: la propriété Input.Type sous IE est en lecture seule; mais la propriété d'entrée. sous Firefox est en lecture-écriture.
Solution: ne modifiez pas la propriété d'entrée. Si vous devez le modifier, vous pouvez d'abord masquer l'entrée d'origine, puis insérer un nouvel élément d'entrée dans la même position.
8. Problème de la fenêtre
Description du problème: 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.
Solution: ajoutez des paramètres de l'événement à la fonction où se produit l'événement, et utilisez var myevent = evt? Evt: (window.event? Window.event: null)
Exemple:
<input type = "Button" onClick = "DoSomething (Event)" /> <Script Language = "JavaScript"> Fonction Dosomething (EVT) {var MyEvent = EVT? EVT: (Window.Event? Window.Event: NULL) ...}9. Event.x et Event.y Problèmes
Description du problème: Sous IE, l'objet uniforme a des attributs x et y, mais pas d'attributs Pagex et Pagey; Sous Firefox, l'objet uniforme a des attributs pagex et pagey, mais pas d'attributs x et y.
Solution: var myx = event.x? event.x: event.pagex; var myy = event.y? event.y: event.pagey;
Si vous considérez le 8ème numéro, utilisez simplement MyEvent au lieu de l'événement.
10. Problème d'événement.
Description du problème: Sous IE, l'objet uniforme a une propriété Srcelement, mais pas de propriété cible; Sous Firefox, l'objet uniforme a une propriété cible, mais pas de propriété Srcelement.
Solution: utilisez srCobj = event.srcelement? event.srcelement: event.target;
Si vous considérez le 8ème numéro, utilisez simplement MyEvent au lieu de l'événement.
11. Problème Window.Location.href
Description du problème: dans IE ou Firefox2.0.x, vous pouvez utiliser Window.Location ou Window.Location.href; Dans Firefox1.5.x, vous ne pouvez utiliser que Window.Location.
Solution: utilisez Window.Location au lieu de Window.Location.href. Bien sûr, vous pouvez également envisager d'utiliser la méthode Location.replace ().
12. Problèmes de fenêtre modaux et non modaux
Description du problème: Sous IE, les fenêtres modales et non modales peuvent être ouvertes via ShowModaldialog et ShowModelessDialog; Sous Firefox, il ne peut pas.
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. Si la fenêtre parent doit contrôler la fenêtre enfant, utilisez var subwindow = window.open (pageurl, nom, paramètres); Pour obtenir l'objet de fenêtre nouvellement ouvert.
Treize problèmes de cadre et d'iframe
La trame suivante est un exemple:
(1) Objet de trame d'accès
IE: Utilisez Window.FrameId ou Window.framename pour accéder à cet objet de trame;
Firefox: utilisez Window.framename pour accéder à cet objet de cadre;
Solution: utilisez Window.Document.getElementById ("frameId") pour accéder à cet objet de trame;
(2) Commutation de contenu de la trame
Dans IE et Firefox, vous pouvez utiliser Window.Document.getElementById ("frameid"). Src = "webjx.com.html" ou window.framename.location = "webjx.com.html" pour changer le contenu du cadre;
Si vous avez besoin de transmettre des paramètres dans le cadre à la fenêtre parent, vous pouvez utiliser le mot-clé parent dans le cadre pour accéder à la fenêtre parent.
14. Problème de chargement corporel
Description du problème: L'objet corporel de Firefox existe avant que la balise corporelle ne soit entièrement lue par le navigateur; tandis que l'objet corporel d'IE doit exister après que la balise corporelle est complètement lue par le navigateur.
[Remarque] Ce problème n'a pas encore été vérifié et sera modifié après vérification.
[Remarque] Il a été prouvé que les problèmes ci-dessus n'existent pas dans IE6, Opera9 et Firefox2. Un script JS simple peut accéder à tous les objets et éléments qui ont été chargés avant le script, même si cet élément n'a pas encore été chargé.
15. Méthode de délégation des événements
Description du problème: dans IE, utilisez document.body.onload = inject; où la fonction inject () a été implémentée avant cela; Dans Firefox, utilisez document.body.onload = inject ();
Solution: utilisez document.body.onload = new function ('inject ()'); ou document.body.onload = function () {/ * voici le code * /}
[Remarque] La différence entre la fonction et la fonction
16. La différence entre l'élément parent accessible
Description du problème: sous IE, utilisez obj.parerentelement ou obj.parentNode pour accéder au nœud parent d'OBJ; Sous Firefox, utilisez obj.parentNode pour accéder au nœud parent d'OBJ.
Solution: Parce que Firefox et IE prennent en charge DOM, OBJ.parentNode est utilisé pour accéder au nœud parent d'OBJ.
17. Le problème de l'innerte.
Description du problème: InnerText fonctionne correctement dans IE, mais InnerText ne fonctionne pas dans Firefox.
Solution: utilisez TextContent au lieu de InnerText dans des navigateurs non IE.
Exemple:
if (navigator.appname.indexof ("explorateur")> -1) {document.getElementById ('élément'). innerText = "mon texte"; } else {document.getElementById ('élément'). textContent = "; mon texte"; }[Remarque] InnerHTML est soutenu par des navigateurs tels que IE et Firefox. D'autres, comme OUTERHTML, ne sont pris en charge que par IE, il est donc préférable de ne pas l'utiliser.
18. Problèmes de fonctionnement de la table
Description du problème: IE, Firefox et d'autres navigateurs ont des opérations différentes sur les balises de table. Dans IE, il n'est pas autorisé à attribuer des valeurs innerHTML à la table et à TR. Lorsque vous utilisez JS, l'utilisation de la méthode APPENDCHILD ne fonctionne pas. Document.ApendChild prend en charge Firefox lors de l'insertion de lignes dans les tables, mais IE ne les soutient pas.
Solution: insérez les lignes dans TBODY, ne les insérez pas directement dans les tables
Solution:
// Ajouter une ligne vierge à la table: var row = otable.insertrow (-1); var cell = document.CreateElement ("TD"); Cell.innerhtml = ""; Cell.classname = "xxxx"; Row.ApendChild (cellule);[Remarque] Il est recommandé d'utiliser des ensembles de framework JS pour utiliser des tables, telles que jQuery.
• Obtenez le nombre de lignes et de colonnes de la table
Dans IE, vous pouvez utiliser le code suivant pour obtenir le nombre de lignes et de colonnes:
var DetailT = grid.getTable ("11"); // obtient la longueur de la ligne var r = de détailt.rows.length; // Obtenez la longueur de la colonne var l = de détailt.cells.length;Et obtenir la longueur de la colonne dans Firefox ou Google n'est pas valide.
Solution:
var DetailT = grid.getTable ("11"); // obtient la longueur de la ligne var r = de détailt.rows.length; // Obtenez la longueur de la colonne var l = de détailt.Rows [0] .Cells.length;19. Problème d'attribution de la largeur de l'objet et de la hauteur
Description du problème: L'énoncé similaire à obj.style.height = imgobj.height dans firefox n'est pas valide.
Solution: utilisez obj.style.height = imgobj.height + 'px' en uniforme;
20. SetAttribute («style», «couleur: rouge;»)
Les supports de Firefox (sauf IE, tous les navigateurs le soutiennent désormais), c'est-à-dire ne le soutient pas
Solution: Don't SetAttribute ('Style', 'Color: Red')
Utilisez object.style.csstext = 'Color: Red;' (il y a des exceptions à cette écriture)
La meilleure façon est d'utiliser toutes les méthodes ci-dessus, et ce sera infaillible.
21. Paramètre de nom de classe
setAttribute ('class', 'styleclass')
Firefox prend en charge, mais IE ne prend pas en charge (spécifiez le nom d'attribut est la classe, IE ne définira pas l'attribut de classe de l'élément.
Solution:
setAttribute ('class', 'styleclass') setAttribute ('classname', 'styleclass') ou directement object.classname = 'StyleClass';IE et FF prennent en charge Object.className.
22. Définir les événements avec SetAttribute
var obj = document.getElementById ('objid');
obj.setAttribute ('onclick', 'funcitonname ();');
Firefox prend en charge, mais IE ne prend pas en charge
Solution:
Dans IE, la notation DOT doit être utilisée pour se référer au gestionnaire d'événements requis et les fonctions anonymes doivent lui être affectées.
comme suit:
var obj = document.getElementById ('objid'); obj.onclick = function () {fucntionName ();};Cette méthode est prise en charge par tous les navigateurs
23. Créez un bouton radio
Browsers autres que IE
var rdo = document.CreateElement ('entrée'); rdo.setAttribute ('type', 'radio'); rdo.setAttribute ('name', 'radioobtn'); rdo.setAttribute («valeur», «vérifié»);IE:
var rdo = document.createElement ("<input name =" radioobtn "type =" radio "value =" checked "/>");Solution:
Cette différence est différente de la précédente. Cette fois, c'est complètement différent, il n'y a donc pas de moyen courant de le résoudre, donc seulement si-else
Heureusement, IE peut reconnaître l'attribut unique du document, que d'autres navigateurs ne peuvent pas reconnaître. Problème résolu.
La solution rapide aux 23 problèmes de compatibilité multi-navigateur en JavaScript est le contenu complet 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.