1. Problema de pesquisa de elementos
1. Document.All [Nome]
(1) Problema existente: o Firefox não suporta document.all [nome]
(2) Solução: use getElementsByName (nome), getElementById (ID), etc. para substituí -lo.
2. Problema de objeto de coleção
(1) Problema existente: IE pode usar () ao usar muitos objetos da classe de coleção, mas apenas [] pode ser usado no Firefox.
Por exemplo: no IE, document.forms ("formname") pode ser usado para retornar um formulário com o nome "FormName", mas não funciona no Firefox.
(2) Solução: use [], no exemplo acima, você pode alterar para documentar.forms ["formname"]
3. O ID do elemento HTML é visível em JavaScript
(1) Problema existente: o ID no elemento HTML no IE pode ser usado diretamente como o nome da variável do objeto subordinado do documento. Não disponível no Firefox.
(2) Solução: use getElementById ("idname") em vez de idname como variável de objeto.
4. Eval (idname) recebe o objeto
(1) Problema existente: no IE, o uso de EVAL (IDNAME) pode obter objetos HTML com ID IDName, mas não pode ser usado no Firefox.
(2) Solução: use getElementById (idname) em vez de avaliar (idname).
5. O nome da variável é o mesmo que o ID do objeto HTML
(1) Problema existente: no Firefox, porque o ID do objeto não é o nome do objeto HTML, você pode usar o mesmo nome de variável que o ID do objeto HTML, que não pode ser usado no IE.
(2) Solução: Ao declarar variáveis, adicione VAR para evitar a ambiguidade, para que também possa ser executada normalmente no IE. Além disso, é melhor não receber o mesmo nome de variável que o ID do objeto HTML para reduzir os erros.
Nota: 3, 4 e 5 pertencem à mesma categoria de problemas.
6. Quadro
(1) Problema existente: no IE, você pode usar window.top.frameid e window.top.framename para obter a janela representada pelo quadro. Somente window.top.framename pode ser usado no Firefox.
(2) Solução: Defina o ID e o nome do quadro como o mesmo e use window.top.frameName para acessar o quadro.
2. Operação DOM
1. Defina o conteúdo de texto do elemento.
(1) Problema existente: ou seja, usa o InnerText, enquanto o Firefox usa o TextContent para definir o conteúdo do texto do elemento.
(2) Solução: se o conteúdo do texto não contiver caracteres especiais como "<" e ">", você poderá usar o InnerHTML. Caso contrário, você pode usar:
var filho = elem.firstchild; if (criança! = nulo) elem.removechild (criança); elem.appendChild (document.createTextNode (content));
2. ParentElement, Parent.Children
(1) Problema existente: o IE pode usar o ParentElement para obter nós dos pais, e os pais. As crianças podem obter todos os nós filhos dos nós. O Firefox não o suporta.
(2) Solução: use parentnode e parent.childnodes.
3. Explicação de Childnodes.
(1) Problema existente: as explicações dos Childnodes no IE e no Firefox são diferentes. O IE não incluirá nós de texto em branco, enquanto o Firefox incluirá.
(2) Solução: Use ChildNodes para filtrar nós de texto, como segue:
Var Children = elem.Childnodes; for (i = 0; i <crianças.length; i ++) {if (filhos [i] .nodetype! = 3) {// filtro de texto de texto // ...}}4. Explicação do documento.GetElementsByName.
(1) Problema existente: getElementsByName no IE verá apenas os elementos <input> e <mg>, enquanto todos os elementos serão verificados no Firefox.
(2) Solução: não use getElementsByName para verificar os elementos que não sejam <input> e <MIG>. Se você deseja obter um único elemento, tente usar o GetElementById.
5. Explicação do documento.getElementById.
(1) Problema existente: getElementbyId no IE não apenas verifica o atributo ID, mas também verifica o atributo de nome. Esse elemento também será retornado quando o atributo de nome corresponde ao parâmetro. No Firefox, apenas o atributo de identificação será verificado.
(2) Solução: tente manter o ID e came o mesmo e não faça o atributo de nome de um elemento e o atributo de identificação de outro elemento da mesma forma.
Iii. Eventos
1. Event.x e event.y problemas
(1) Problema existente: no IE, o objeto de evento tem atributos x, y, mas não no Firefox.
(2) Solução: no Firefox, o equivalente a event.x é event.pagex. Pode ser usado:
mx = event.x? event.x: event.pagex;
2. Window.Event
(1) Problema existente: usar janela.event não pode ser executado no Firefox
(2) Solução:
Código original (pode ser executado no IE):
<input type = "button" name = "algumButton" value = "submite" onclick = "javascript: gotosubMit ()"/> ... <script linguage = "javascript"> function gotosubMit () {... alert (window.event); // Use window.event ...} </sCript>Novo código (pode ser executado no IE e no Firefox):
<input type = "button" name = "algumbutton" value = "submite" onclick = "javascript: gotosubMit (event)"/> ... <script linguage = "javascript"> function gotosubMit (evt) {evt = evt? EVT: (Window.Event? Window.Event: NULL); ... alerta (EVT); // Use Evt ...} </sCript>3.
(1) Problema existente: ou seja, usa o AnextEvent para adicionar eventos, e o Firefox usa addEventListener.
(2) Solução: da seguinte forma, preste atenção à diferença nos parâmetros do evento, um é clique e o outro é OnClick.
if (document.attachevent) document.attachevent ("clique", clickhandler, false);
else document.addeventListener ("OnClick", ClickHandler);
4. Gramática
1. Const
(1) Problema existente: a palavra -chave const não pode ser usada no IE. Por exemplo, const constvar = 32; No IE, este é um erro de sintaxe.
(2) Solução: não use const, use var.
2. Vírgulas extras
(1) Problema existente: as constantes literais do objeto no Firefox contêm muitas vírgulas, que não são permitidas no IE. A afirmação a seguir é ilegal no IE.
var obj = {'key': 'aaa',}
(2) Solução: Remova o excesso de vírgulas.
5. XML
1. Crie xmlHttPrequest
(1) Problemas existentes: o Firefox usa xmlHttPrequest, ou seja, usa o ActiveXObject.
(2) Solução:
if (window.xmlHttPrequest) {req = new XmlHttPrequest (); } else if (window.activexObject) {req = new ActivexObject ("microsoft.xmlhttp"); }2. Crie um DOM
(1) Problema existente: o Firefox e o IE criam DOMs de maneira diferente.
(2) Solução:
função createxmldom () {var oxmldom; if (window.activexObject) {// ie oxmldom = new ActivexObject ("Microsoft.xmldom"); } else {// firefox oxmldom = document.implementation.createDocument ("", "", nulo); }}3. Carregue xml
(1) Problema existente: se você deseja carregar arquivos externos, ou seja, Firefox, poderá usá -lo:
oxmldom.async = false; // Isso é necessário no Firefox
oxmldom.load ("test.xml");
No entanto, eles carregam strings XML de maneiras diferentes. Você pode usar diretamente oxmldom.loadxml ("<sict> <child/> </root>") no IE, enquanto o Firefox precisa usar o Domparser:
var ocarser = new Domparser ();
var oxmldom = ocarser.parsefromstring ("<root/>", "text/xml");
(2) Solução: O melhor método é adicionar o método loadxml ao XMLDOM gerado pelo Firefox:
if (isfirefox) {// requer detecção de navegador
Document.prototype.loadxml = function (sxml) {var ocarser = new Domparser (); var oxmldom = Oparsser.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); }}}Dessa forma, o método loadxml pode ser chamado no IE e no Firefox.
4. Suporte XPath
(1) Problemas existentes: no IE, você pode usar diretamente o XMLDOM's SelectNodes para selecionar nós com base na representação do XPath. O Firefox é mais complicado e requer o uso do XPathEvaluator.
Ou seja:
var lstnodes = oxmldom.documentElement.SelectNodes ("funcionário/nome"); for (var i = 0; i <lstnodes.length; i ++) {alert (lstnodes [i] .firstchild.nodEvalue); }Firefox:
var oEvaluator = new XPathEvaluator (); var oresult = oEvaluator.Evaluate ("funcionário/nome", oxmldom.documentElement, null, xpathResult.ordered_node_iterator_type, null); var oElement = oresult.iterateNext (); while (oElement) {alert (oelement.firstchild.nodEvalue); oElement = oresult.iteratenext (); }(2) Solução: Um método melhor para adicionar o método SelectNodes ao elemento do Firefox.
if (isfirefox) {// o navegador precisa 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.iterateNext (); while (oElement) {anodes.push (oelement); oElement = oresult.iteratenext (); }} retorna ânodos; }}Dessa forma, o método SelectNodes pode ser chamado no IE e no Firefox.
5. Suporte XSLT
(1) Problema existente: no IE, você pode usar o método TransferNode do XMLDOM para convertê -lo em HTML, enquanto o Firefox precisa usar o XSLTProcessor.
Ou seja:
oxmldom.load ("funcionário.xml"); oxsldom.load ("funcionário.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) Solução: Uma maneira melhor de adicionar um método TransferNode ao nó do Firefox.
if (isfirefox) {// o navegador precisa 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"); retornar SXML; }}Dessa forma, o método TransferNode pode ser chamado no IE e no Firefox.
O exposto acima é um resumo do método de redação JS compatível com o navegador, espero que seja útil para o aprendizado de todos.