1. Problema de búsqueda de elementos
1. Documento. Todo [Nombre]
(1) Problema existente: Firefox no admite documentos. Todo [Nombre]
(2) Solución: use GetElementsByName (nombre), GetElementById (ID), etc. para reemplazarlo.
2. Problema de objetos de recopilación
(1) Problema existente: es decir, puede usar () cuando se usa muchos objetos de clase de recolección, pero solo [] se puede usar en Firefox.
Por ejemplo: en IE, document.forms ("FormName") se puede usar para devolver un formulario con el nombre "FormName", pero no funciona en Firefox.
(2) Solución: use [], en el ejemplo anterior, puede cambiar a document.forms ["FormName"]
3. La identificación del elemento HTML es visible en JavaScript
(1) Problema existente: la ID en el elemento HTML en IE se puede usar directamente como el nombre variable del objeto subordinado del documento. No disponible en Firefox.
(2) Solución: use getElementById ("idname") en lugar de idname como variable de objeto.
4. Eval (IdName) obtiene el objeto
(1) Problema existente: en IE, el uso de Eval (IdName) puede obtener objetos HTML con ID IdName, pero no se puede usar en Firefox.
(2) Solución: use GetElementById (IDNAME) en lugar de EVAL (IDNAME).
5. El nombre de la variable es el mismo que el ID del objeto HTML
(1) Problema existente: en Firefox, debido a que la ID del objeto no es el nombre del objeto HTML, puede usar el mismo nombre de variable que la ID de objeto HTML, que no puede usarse en IE.
(2) Solución: al declarar variables, agregue VAR para evitar la ambigüedad, de modo que también pueda ejecutarse normalmente en IE. Además, es mejor no tomar el mismo nombre de variable que la ID del objeto HTML para reducir los errores.
Nota: 3, 4 y 5 pertenecen a la misma categoría de problemas.
6. Marco
(1) Problema existente: en IE, puede usar Window.top.frameid y Window.top.framename para obtener la ventana representada por el marco. Solo Window.top.framename se puede usar en Firefox.
(2) Solución: configure la ID y el nombre del marco en el mismo, y use Windows.top.framename para acceder al marco.
2. Operación DOM
1. Establezca el contenido de texto del elemento.
(1) Problema existente: IE usa InnteText, mientras que Firefox usa TextContent para establecer el contenido de texto del elemento.
(2) Solución: si el contenido de texto no contiene caracteres especiales como "<" y ">", puede usar InnerHTML. De lo contrario, puede usar:
var child = elem.firstchild; if (niño! = nulo) elem.removechild (niño); elem.appendChild (document.createTextNode (content));
2. Parentralement, padre.
(1) Problema existente: es decir, puede usar el relevo para el criadero para obtener nodos parentales, y los padres. Los niños pueden obtener todos los nodos infantiles de nodos. Firefox no lo apoya.
(2) Solución: use ParentNode y Parent.ChildNodes.
3. Explicación de los nodos de los niños.
(1) Problema existente: Las explicaciones de los nodos de los niños en IE y Firefox son diferentes. IE no incluirá nodos de texto en blanco, mientras que Firefox incluirá.
(2) Solución: use nodos de niños para filtrar nodos de texto, de la siguiente manera:
VAR NIÑOS = ELEM.CHILDNODES; para (i = 0; i <children.length; i ++) {if (niños [i] .nodeType! = 3) {// filtro de texto nodos // ...}}4. Explicación de document.getElementsByName.
(1) Problema existente: GetElementsByName en IE solo verificará los elementos <input> e <img>, mientras que todos los elementos se verificarán en Firefox.
(2) Solución: no use GetElementsByName para verificar elementos que no sean <input> y <img>. Si desea obtener un solo elemento, intente usar GetElementByID.
5. Explicación de Document.getElementByid.
(1) Problema existente: GetElementById en IE no solo verifica el atributo de identificación, sino que también verifica el atributo de nombre. Este elemento también se devolverá cuando el atributo de nombre coincida con el parámetro. En Firefox, solo se verificará el atributo de identificación.
(2) Solución: intente mantener la identificación y el nombre igual, y no haga el atributo de nombre de un elemento y el atributo de identificación de otro elemento igual.
Iii. Eventos
1. Event.x y Event.y Problemas
(1) Problema existente: en IE, el objeto del evento tiene atributos X, Y, pero no en Firefox.
(2) Solución: en Firefox, el equivalente de event.x es event.pagex. Se puede usar:
mx = event.x? event.x: event.pagex;
2. Ventana. Evento
(1) Problema existente: Uso de Window.Event no se puede ejecutar en Firefox
(2) Solución:
Código original (se puede ejecutar en IE):
<input type = "button" name = "SomeButton" value = "Subt" onClick = "javaScript: gotosubMit ()"/> ... <script language = "javaScript"> function gotosubmit () {... alerta (window.event); // usa window.event ...} </script>Nuevo código (puede ejecutarse en IE y Firefox):
<input type = "button" name = "SomeButton" value = "Subt" onClick = "javaScript: gotosubmit (event)"/> ... <script language = "javaScript"> function gotosubmit (evt) {evt = evt? EVT: (Window.event? Window.event: NULL); ... alerta (EVT); // usa EVT ...} </script>3. Adjunte Event y AddEventListener
(1) Problema existente: IE usa AttackEvent para agregar eventos, y Firefox usa AddEventListener.
(2) Solución: de la siguiente manera, preste atención a la diferencia en los parámetros del evento, uno es clic y el otro está en el cierre.
if (document.attachevent) document.attachevent ("haga clic", clickhandler, falso);
else document.addeventListener ("onClick", clickhandler);
4. Gramática
1. Constante
(1) Problema existente: la palabra clave const no se puede usar en IE. Por ejemplo, const constvar = 32; En IE, este es un error de sintaxis.
(2) Solución: no use const, use VAR en su lugar.
2. Comas extra
(1) Problema existente: las constantes literal del objeto en Firefox contienen muchas comas, que no están permitidas en IE. La siguiente declaración es ilegal en IE.
var obj = {'key': 'aaa',}
(2) Solución: elimine el exceso de comas.
5. XML
1. Crear xmlhttprequest
(1) Problemas existentes: Firefox usa xmlhttprequest, es decir, usa ActiveXObject.
(2) Solución:
if (window.xmlhttprequest) {req = new xmlhttprequest (); } else if (window.activexObject) {req = new ActiveXObject ("Microsoft.xmlhttp"); }2. Crea un DOM
(1) Problema existente: Firefox e IE crean DOM de manera diferente.
(2) Solución:
function createExmldom () {var oxmldom; if (window.activexObject) {// ie oxmldom = new ActiveXObject ("Microsoft.xmldom"); } else {// firefox oxmldom = document.implementation.createDocument ("", "", nulo); }}3. Cargar XML
(1) Problema existente: si desea cargar archivos externos, es decir, Firefox, puede usarlo:
oxmldom.async = false; // Esto es necesario en Firefox
oxmldom.load ("test.xml");
Sin embargo, cargan cadenas XML de diferentes maneras. Puede usar directamente oxmldom.loadxml ("<Root> <Child /> </root>") en IE, mientras que Firefox necesita usar DomParser:
var oparser = new DomParser ();
var oxmldom = Oparser.ParseFromString ("<Root/>", "Text/xml");
(2) Solución: el mejor método es agregar el método LoadXML al XMLDOM generado por Firefox:
if (isfirefox) {// requiere la detección del navegador
Document.prototype.loadxml = function (sxml) {var oparser = new DomParser (); var oxmldom = oparser.parsefromstring (sxml, "text/xml"); while (this.firstchild) this.removechild (this.firstchild); for (var i = 0; i <oxmldom.childnodes.length; i ++) {var oneWnode = this.ImportNode (oxmldom.childNodes [i], true); this.appendChild (OneWnode); }}}De esta manera, el método LoadXML se puede llamar en IE y Firefox.
4. Soporte de XPath
(1) Problemas existentes: en IE, puede usar directamente los SelectNodes de XMLDOM para seleccionar nodos basados en la representación XPATH. Firefox es más complicado y requiere el uso de XpatheValuator.
ES DECIR:
var lstnodes = oxmldom.documentelement.selectNodes ("empleado/nombre"); for (var i = 0; i <lstnodes.length; i ++) {alert (lstnodes [i] .firstchild.nodeValue); }Firefox:
var oevaluator = new XPatheValuator (); var oresult = oevaluator.evaluate ("empleado/nombre", oxmldom.documentelement, null, xpathresult.ordered_node_iterator_type, null); var oElement = oresult.iterAntExt (); while (oelement) {alert (oelement.firstchild.nodeValue); oElement = oresult.iterAdEntext (); }(2) Solución: un método mejor para agregar el método SelectNodes al elemento de Firefox.
if (isfirefox) {// El navegador necesita detectar element.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.iterAnext (); while (oelement) {anodes.push (oelement); oElement = oresult.iterAdEntext (); }} anodes de retorno; }}De esta manera, el método SelectNodes se puede llamar tanto en IE como en Firefox.
5. Soporte XSLT
(1) Problema existente: en IE, puede usar el método TransferNode de XMLDOM para convertirlo en HTML, mientras que Firefox necesita usar XSLTProcessor.
ES DECIR:
oxmldom.load ("empleado.xml"); oxsldom.load ("Empleado.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"); alerta (sxml);
(2) Solución: una mejor manera de agregar un método TransferNode al nodo de Firefox.
if (isfirefox) {// El navegador necesita detectar 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 esta manera, el método TransferNode se puede llamar tanto en IE como en Firefox.
Lo anterior es un resumen del método de escritura JS compatible con el navegador, espero que sea útil para el aprendizaje de todos.