1. Problème de recherche d'éléments
1. Document.all [nom]
(1) Problème existant: Firefox ne prend pas en charge le document.
(2) Solution: Utilisez GetElementsByName (nom), GetElementById (ID), etc. pour le remplacer.
2. Problème d'objet de collecte
(1) Problème existant: IE peut utiliser () lors de l'utilisation de nombreux objets de classe de collecte, mais seul [] peut être utilisé dans Firefox.
Par exemple: dans IE, Document.Forms ("FormName") peut être utilisé pour renvoyer un formulaire avec le nom "FormName", mais il ne fonctionne pas dans Firefox.
(2) Solution: utilisez [], dans l'exemple ci-dessus, vous pouvez changer en document.forms ["formName"]
3. L'ID de l'élément HTML est visible en javascript
(1) Problème existant: L'ID dans l'élément HTML dans IE peut être utilisé directement comme nom de variable de l'objet subordonné du document. Non disponible dans Firefox.
(2) Solution: utilisez GetElementById ("idName") au lieu d'IdName comme variable d'objet.
4. Eval (idname) obtient l'objet
(1) Problème existant: dans IE, l'utilisation d'EVAL (IDNAME) peut obtenir des objets HTML avec ID IDNAME, mais ne peut pas être utilisé dans Firefox.
(2) Solution: utilisez GetElementById (idName) au lieu d'EVAL (idName).
5. Le nom de la variable est le même que l'ID d'objet HTML
(1) Problème existant: Dans Firefox, car l'ID d'objet n'est pas le nom de l'objet HTML, vous pouvez utiliser le même nom de variable que l'ID d'objet HTML, qui ne peut pas être utilisé dans IE.
(2) Solution: lors de la déclaration des variables, ajoutez VAR pour éviter l'ambiguïté, afin qu'il puisse également fonctionner normalement dans IE. De plus, il est préférable de ne pas prendre le même nom de variable que l'ID d'objet HTML pour réduire les erreurs.
Remarque: 3, 4 et 5 appartiennent tous à la même catégorie de problèmes.
6. Cadre
(1) Problème existant: dans IE, vous pouvez utiliser Window.top.frameid et Window.top.framename pour faire représenter la fenêtre représentée par le cadre. Only Window.top.framename peut être utilisée dans Firefox.
(2) Solution: définissez l'ID et le nom de la trame à la même chose et utilisez Window.top.framename pour accéder au cadre.
2. Opération DOM
1. Définissez le contenu texte de l'élément.
(1) Problème existant: IE utilise InnerText, tandis que Firefox utilise TextContent pour définir le contenu du texte de l'élément.
(2) Solution: Si le contenu texte ne contient pas de caractères spéciaux tels que "<" et ">", vous pouvez utiliser InnerHTML. Sinon, vous pouvez utiliser:
var child = elem.firstchild; si (enfant! = null) elem.removechild (enfant); elem.appendChild (document.CreateTextNode (contenu));
2. Parentelement, parent.
(1) Problème existant: IE peut utiliser Parentement pour obtenir des nœuds parents, et les parents peuvent obtenir tous les nœuds enfants des nœuds. Firefox ne le soutient pas.
(2) Solution: utilisez ParentNode et Parent.ChildNodes.
3. Explication des nombres enfants.
(1) Problème existant: les explications des NIDNODES CHILDS dans IE et Firefox sont différentes. IE n'inclura pas les nœuds de texte vierges, tandis que Firefox comprendra.
(2) Solution: Utilisez des NidNodes pour filtrer les nœuds de texte, comme suit:
var enfants = elem.childnodes; pour (i = 0; i <enfants.length; i ++) {if (enfants [i] .NodeType! = 3) {// Filtrez des nœuds de texte // ...}}4. Explication de Document.getElementsByName.
(1) Problème existant: GetElementsByName dans IE ne vérifiera que les éléments <prenous> et <img>, tandis que tous les éléments seront vérifiés sous Firefox.
(2) Solution: n'utilisez pas GetElementsByName pour vérifier les éléments autres que <fort> et <img>. Si vous souhaitez obtenir un seul élément, essayez d'utiliser GetElementById.
5. Explication de Document.getElementByid.
(1) Problème existant: GetElementByid dans IE non seulement vérifie l'attribut ID, mais vérifie également l'attribut de nom. Cet élément sera également retourné lorsque l'attribut de nom correspond au paramètre. Dans Firefox, seul l'attribut ID sera vérifié.
(2) Solution: essayez de garder l'ID et le nom de la même manière, et ne faites pas l'attribut de nom d'un élément et l'attribut ID d'un autre élément le même.
Iii. Événements
1. Event.x et Event.y Problèmes
(1) Problème existant: dans IE, l'objet événement a des attributs x, y, mais pas dans Firefox.
(2) Solution: Dans Firefox, l'équivalent de Event.x est event.pagex. Peut être utilisé:
mx = event.x? event.x: event.pagex;
2. Window.Event
(1) Problème existant: l'utilisation de Window.Event ne peut pas fonctionner sur Firefox
(2) Solution:
Code d'origine (peut être exécuté en IE):
<input type = "Button" name = "Somebutton" value = "soumider" onClick = "javascript: gotoSubmit ()" /> ... <script linguisse = "javascript"> function gotosubmit () {... alert (window.event); // utilise window.event ...} </cript>Nouveau code (peut fonctionner dans IE et Firefox):
<input type = "Button" name = "Somebutton" value = "soumider" onclick = "javascript: gotosubmit (event)" /> ... <script linguisse = "javascript"> function gotosubmit (evt) {evt = evt? evt: (window.event? window.event: null); ... alerte (EVT); // utilise evt ...} </cript>3. attachevent et addeventListener
(1) Problème existant: IE utilise PitEdEvent pour ajouter des événements, et Firefox utilise AddEventListener.
(2) Solution: comme suit, faites attention à la différence de paramètres de l'événement, l'un est un clic et l'autre est onClick.
if (document.attachevent) document.Attachevent ("cliquez", cliquez sur Handler, false);
else document.addeventListener ("onClick", clickhandler);
4. Grammaire
1. Const
(1) Problème existant: le mot-clé const ne peut pas être utilisé dans IE. Par exemple, const var = 32; Dans IE, c'est une erreur de syntaxe.
(2) Solution: n'utilisez pas const, utilisez VAR à la place.
2. Comas supplémentaires
(1) Problème existant: Les constantes littérales d'objet dans Firefox contiennent beaucoup de virgules, qui ne sont pas autorisées dans IE. La déclaration suivante est illégale dans IE.
var obj = {'key': 'aaa',}
(2) Solution: Retirez les virgules en excès.
5. XML
1. Créer XMLHttpRequest
(1) Problèmes existants: Firefox utilise XMLHTTPRequest, IE utilise ActiveXObject.
(2) Solution:
if (window.xmlhttpRequest) {req = new xmlHttpRequest (); } else if (window.activexObject) {req = new activeXObject ("Microsoft.xmlhttp"); }2. Créez un dom
(1) Problème existant: Firefox et IE créent des DOM différemment.
(2) Solution:
fonction createExmldom () {var oxMldom; if (window.activexObject) {// c'est-à-dire oxmldom = new activeXObject ("Microsoft.xmldom"); } else {// firefox oxmldom = document.implementation.CreateDocument ("", "", null); }}3. Chargez XML
(1) Problème existant: si vous souhaitez charger des fichiers externes, c'est-à-dire et Firefox, vous pouvez l'utiliser:
oxmlDom.async = false; // Ceci est nécessaire dans Firefox
oxmldom.load ("test.xml");
Cependant, ils chargent des chaînes XML de différentes manières. Vous pouvez utiliser directement oxMldom.LoadXml ("<ooth> <fild /> </ root>") dans c'est-à-dire, tandis que Firefox doit utiliser DompaSer:
var oparser = new DOMPARSER ();
var oxmldom = oparser.parsefromString ("<root />", "text / xml");
(2) Solution: la meilleure méthode consiste à ajouter une méthode LoadXML au XMLDOM généré par Firefox:
if (isFireFox) {// nécessite une détection du navigateur
Document.prototype.loadxml = fonction (sxml) {var oparser = new DOMPARSER (); var oxmldom = oparser.parsefromString (sxml, "text / xml"); tandis que (this.firstchild) this.removechild (this.firstchild); pour (var i = 0; i <oxMldom.ChildNodes.length; i ++) {var onewnode = this.importNode (oxMldom.ChildNodes [i], true); this.appendChild (onewnode); }}}De cette façon, la méthode LoadXML peut être appelée dans IE et Firefox.
4. Support XPath
(1) Problèmes existants: dans IE, vous pouvez directement utiliser SELECTNODES de XMLDOM pour sélectionner les nœuds en fonction de la représentation XPATH. Firefox est plus compliqué et nécessite l'utilisation de xpathevaluator.
IE:
var lstnodes = oxmldom.DocumentElement.SelectNodes ("Employee / Name"); pour (var i = 0; i <lStNodes.length; i ++) {alert (lstnodes [i] .firstchild.nodevalue); }Firefox:
var ovaluator = new xpathevaluator (); var oresult = oevaluator.evaluate ("employé / nom", oxmldom.documentElement, null, xpathResult.Ordered_node_iterator_type, null); var oelement = oresult.iterateNext (); while (oelement) {alert (oelement.firstchild.nodevalue); oelement = oresult.iterateNext (); }(2) Solution: une meilleure méthode pour ajouter la méthode SELECTNODES à l'élément de Firefox.
if (isFireFox) {// Le navigateur doit détecter élément.prototype.selectNodes = function (sxpath) {var oevaluator = new xpathevaluator (); var oresult = oevaluator.evaluate (sxpath, this, null, xpathResult.ordered_node_iterator_type, null); var anodes = new Array (); if (oresult! = null) {var oelement = oresult.iteratEnxt (); while (oelement) {anodes.push (oelement); oelement = oresult.iterateNext (); }} retourne les anodes; }}De cette façon, la méthode SelectNodes peut être appelée dans IE et Firefox.
5. Support XSLT
(1) Problème existant: dans IE, vous pouvez utiliser la méthode TransferNode de XMLDOM pour la convertir en HTML, tandis que Firefox doit utiliser XSLTProcessor.
IE:
oxmldom.load ("employee.xml"); oxsldom.load ("employee.xslt"); var sresult = oxMlDom.transformNode (oxsldom);Firefox:
var oprocessor = new xsltprocessor (); Oprocessor.IMPORTSTYLESHEET (OXSLDOM); var oresultdom = oprocessor.transformtoDocument (oxMldom); var oserializer = new XMLSerializer (); var sxml = oserializer.serializetoString (oresultdom, "text / xml"); alerte (sxml);
(2) Solution: une meilleure façon d'ajouter une méthode TransferNode au nœud de Firefox.
if (isFireFox) {// Le navigateur doit détecter node.prototype.transformNode = function (oxslDom) {var oprocessor = new xsltprocessor (); Oprocessor.IMPORTSTYLESHEET (OXSLDOM); var oresultdom = oprocessor.transformtoDocument (oxMldom); var oserializer = new XMLSerializer (); var sxml = oserializer.serializetoString (oresultdom, "text / xml"); return sxml; }}De cette façon, la méthode de transfertnode peut être appelée à la fois dans IE et Firefox.
Ce qui précède est un résumé de la méthode d'écriture JS compatible avec compatibilité du navigateur, j'espère que cela sera utile à l'apprentissage de tout le monde.