Este artigo resume e analisa questões comuns de compatibilidade no JavaScript nos navegadores do IE e Firefox. Compartilhe -o para sua referência, como segue:
Forma
Document.FormName.Item ("ItemName")IE: Você pode usar document.formname.item ("itemName") ou document.formname.lements ["elementName"]
Firefox: somente document.formname.lements ["elementName"]
Solução: use Document.FormName.Elements ["ElementName"]
Objetos da classe de coleção
Ou seja: você pode usar () ou [] para obter objetos de classe de coleta;
Firefox: use apenas [] para obter objetos de classe de coleta.
Solução: use [] para obter objetos de classe de coleta de maneira unificada.
Propriedades personalizadas
IE: Você pode usar o método de obter atributos regulares para obter atributos personalizados ou pode usar getAttribute () para obter atributos personalizados
Firefox: você só pode usar getAttribute () para obter propriedades personalizadas.
Solução: Obtenha uniformemente atributos personalizados através do getAttribute ().
Aquisição de elementos
Eval ("IdName")IE: Você pode usar o Eval ("IdName") ou GetElementById ("IdName") para obter objeto HTML com idName;
Firefox: Você só pode usar o GetElementById ("IdName") para obter objetos HTML com IDName com o IDNAME.
Solução: use getElementById ("idname") para obter o objeto HTML com ID como idName.
Nomeação duplicada
Problema com o mesmo nome de variável que um determinado ID do objeto HTML
IE: O ID do objeto HTML pode ser usado diretamente como o nome da variável do objeto subordinado do documento, mas não pode ser usado no Firefox;
Firefox: Você pode usar o mesmo nome de variável que o ID do objeto HTML, mas não pode no IE.
Solução alternativa: use document.getElementById ("idname") em vez de document.idname. É melhor não levar nomes de variáveis com o mesmo ID do objeto HTML para reduzir erros; Ao declarar variáveis, adicione VAR para evitar a ambiguidade.
const
IE: use apenas a palavra -chave VAR para definir variáveis.
Firefox: você pode usar a palavra -chave const ou a palavra -chave VAR para definir variáveis.
Solução: use a palavra -chave var para definir variáveis uniformemente.
input.type
INPUT.TYPE PROBLEMA DE ATRIBUIÇÃO
IE: O atributo input.Type é somente leitura.
Firefox: o atributo input.type é lido e gravado.
Window.Event
Window.Event só pode ser executado sob o IE, não no Firefox, porque o evento Firefox só pode ser usado na cena em que o evento ocorre.
Firefox: o evento deve ser adicionado da fonte para a passagem de parâmetros. O IE ignora esse parâmetro e usa a janela.Event para ler o evento.
Solução:
<script linguage = "javascript"> function diversão (e) {e = e? E: (Window.Event? Window.Event: NULL); } </script>event.x e event.y
Descrição: No IE, o objeto uniforme possui atributos X e Y, mas não possui atributos PageX e Pagey; Sob o Firefox, o objeto uniforme possui atributos PageX e Pagey, mas não possui atributos X e Y.
Solução: use mx (mx = event.x? Event.x: event.pagex;) em vez de event.x sob ie ou event.pagex sob o firefox.
Event.srcelement
IE: O objeto de evento possui uma propriedade SRCELEMENT, mas não possui uma propriedade de destino;
Firefox: Até o objeto possui uma propriedade de destino, mas nenhuma propriedade SRCELEMENT.
Solução: use obj (obj = event.srcelement? Event.srcelement: event.target;) em vez de event.srcelement sob o ie ou event.Target sob Firefox. Por favor, preste atenção também aos problemas de compatibilidade do evento.
window.Location.href
Ie ou firefox2.0.x: você pode usar o window.location ou window.location.href;
Firefox1.5.x: Somente Window.Location é usado
Solução alternativa: use window.location em vez de window.location.href.
Janelas modais e não modais
IE: janelas modais e não modais podem ser abertas através do ShowModaldialog e ShowmodlessDialog
Firefox: Não!
Solução: use window.open (pageurl, nome, parâmetros) para abrir uma nova janela.
Se você precisar passar os parâmetros na janela da criança de volta para a janela dos pais, poderá usar a janela.Perpener na janela da criança para acessar a janela do pai. Por exemplo: var parwin = window.opener; parwin.document.getElementById ("aqing"). Value = "aqing";
quadro
O quadro a seguir é um exemplo:
<quadro src = "xxx.html" id = "frameId" name = "Framename" />
1. Acesse o objeto da estrutura:
[O objeto retornado no IE é objeto e o tipo específico será exibido em FF, como: janela do objeto]
IE: use window.frameId ou window.frameName para acessar este objeto de quadro. FrameID e Framename podem ter o mesmo nome.
Firefox: Somente Window.frameName pode ser usado para acessar esse objeto de quadro.
No IE e no Firefox, você pode usar o window.document.getElementById ("frameId") para acessar esse objeto de quadro.
2. Conteúdo do quadro da chave:
No IE e no Firefox, você pode usar o Window.document.getElementById ("testFrame"). Src = "xxx.html" ou window.framename.Location = "xxx.html" para alternar o conteúdo do quadro.
Se você precisar passar os parâmetros no quadro de volta para a janela pai (observe que ele não é um abridor, mas um quadro pai), você pode usar o pai no quadro para acessar a janela pai. Por exemplo: parent.document.form1.filename.value = "A";
Corpo
IE: O corpo deve existir depois que a etiqueta corporal é totalmente lida pelo navegador.
Firefox: o corpo existe antes que a etiqueta corporal seja totalmente lida pelo navegador.
Método de delegação de eventos
IE: A cópia do código é a seguinte: document.body.onload = injeção; // function inject () foi implementado antes disso
Firefox: a cópia do código é a seguinte: document.body.onload = inject ();
Elemento pai
A diferença entre o Firefox e o elemento pai ou mãe (ParentElement)
Ou seja: obj.parentelement
Firefox: obj.parentNode
Solução: Como o Firefox e o IE suportam o DOM, o uso de obj.parentnode é uma boa escolha.
Cursor do ponteiro do mouse
Cursor: Hand vs Cursor: Ponteiro
Firefox: Hand não suportado
IE: Support Pointer
Solução: Use ponteiro uniformemente
Texto de conteúdo
O InnerText funciona normalmente no IE. No entanto, o InnerText não funciona no Firefox, o TextContent é necessário.
Solução:
if (navegator.appname.indexof ("explorer")> -1) {document.getElementById ('elemento'). innerText = "meu texto"; } else {document.getElementById ('elemento'). textc; }Operação na tabela
IE, Firefox e outros navegadores têm operações diferentes em tags de tabela. No IE, não tem permissão para atribuir valores innerhtml à tabela e tr. Ao usar o JS para adicionar um TR, o método AppendChild não é útil.
Solução:
// Adicione uma linha em branco à tabela: var row = Otable.insertrow (-1); var celular = document.createElement ("td"); Cell.innerhtml = ""; Cell.className = "A"; row.appendChild (célula);Coleção de opções
Operação da coleção de opções em seleção
Além de [], selectName.Options.item () também é possível. Além disso, selectName.Options.Length, SelectName.Options.Add/Remow pode ser usado nos dois navegadores.
*Observe que o elemento é atribuído após o ADD, caso contrário, ele falhará.
XmlHttp
if (window.xmlHttPrequest) {xmlHttp = new XmlHttPrequest (); } else if (window.activexObject) {// código para ie xmlHttp = new ActiveXObject ("microsoft.xmlhttp"); } if (xmlHttp) {xmlhttp.onreadyStatechange = xmlHttpChange; xmlhttp.open ("get", url, true); xmlhttp.send (); }Para obter mais informações sobre o conteúdo relacionado a JavaScript, consulte os tópicos deste site: "Resumo dos erros de JavaScript e habilidades de depuração", "Resumo do Javascript Mathematical Operation Uso", "Resumo de Jansy Summaty Summaty e Javithript", Alling All Bresetm Secuching Effects and Skills "," Summary of JavaScript " Habilidades "," Resumo das estruturas de dados JavaScript e habilidades de algoritmo "e" Resumo do algoritmo e habilidades de travessia de JavaScript "
Espero que este artigo seja útil para a programação JavaScript de todos.