A compatibilidade com JavaScript tem sido um grande problema para os desenvolvedores da Web. As diferenças entre especificações formais, padrões factuais e várias implementações fizeram com que muitos desenvolvedores sofressem dia e noite. Para esse fim, a compatibilidade de JavaScript do IE e do Firefox é resumida principalmente das seguintes diferenças:
A cópia do código é a seguinte:
1. Diferenças entre funções e métodos;
2. Acesso e configurações de estilo;
3. Método DOM e referência de objeto;
4. Manuseio de eventos;
5. Tratamento de compatibilidade para outras diferenças.
1. Diferenças entre funções e métodos
1. Método getyear ()
[Instruções de análise] Vamos dar uma olhada no seguinte código:
A cópia do código é a seguinte:
var ano = new Date (). getyear ();
document.write (ano);
A data em que você entra no IE é "2010" e a data que você vê no Firefox é "110", principalmente porque no Firefox GetYear retorna o valor de "atual ano-1900".
【Processamento de compatibilidade】 Adicionar ao julgamento do ano, como:
A cópia do código é a seguinte:
var ano = new Date (). getyear ();
ano = (ano <1900? (1900+ano): ano);
document.write (ano);
Você também pode chamá -lo através do Getlyear Getutclyear:
A cópia do código é a seguinte:
var ano = new Date (). Getlyear ();
document.write (ano);
2. Eval () função
[Nota de análise] No IE, você pode usar o Eval ("IdName") ou GetElementById ("IdName") para obter objetos HTML com IDName; No Firefox, você só pode usar o GetElementById ("IdName") para obter objetos HTML com IDName.
[Processamento de compatibilidade] Use GetElementById ("IdName") para obter o objeto HTML com o IDName com o IDNAME.
3. Declaração const
[Nota de análise] A palavra -chave const não pode ser usada no IE. como:
A cópia do código é a seguinte:
const constvar = 32;
No IE, este é um erro de sintaxe.
【Processamento compatível】 Não use const, use var.
4. Var
[Instruções de análise] Consulte o seguinte código:
A cópia do código é a seguinte:
eco = função (str) {
document.write (str);
}
Essa função é executada normalmente no IE, mas um erro foi relatado no Firefox.
[Processamento compatível] É normal adicionar VAR antes do Echo, e esse é o objetivo de nossa menção de var.
5. Edição const
[Nota de análise] A palavra -chave const não pode ser usada no IE. Por exemplo, const constvar = 32; No IE, este é um erro de sintaxe.
【Solução】 Não use const, use var.
2. Acesso e configurações de estilo
1. O atributo "flutuante" do CSS
[Observação da análise] A sintaxe mais básica para JavaScript para acessar um determinado valor CSS é: object.style.property, mas algumas propriedades do CSS são as mesmas que os nomes de palavras reservados em JavaScript, como "float", "para", "classe", etc., e os métodos de escrita são diferentes dos diferentes braços.
No IE, escreva isso:
A cópia do código é a seguinte:
document.getElementById ("cabeçalho"). style.stylefloat = "esquerda";
No Firefox, escreva o seguinte:
A cópia do código é a seguinte:
document.getElementById ("cabeçalho"). style.cssfloat = "esquerda";
[Processamento de compatibilidade] Adicione um julgamento antes de escrever para determinar se o navegador é IE:
A cópia do código é a seguinte:
if (document.all) {//
document.getElementById ("cabeçalho"). style.stylefloat = "esquerda";
}
mais {// indefinido quando não
document.getElementById ("cabeçalho"). style.cssfloat = "esquerda";
}
2. Acesso "para" na tag <etiqueta>
[Nota de análise] Como o atributo "Float", também requer o uso da distinção de sintaxe invisível para acessar "para" na tag <belt>.
No IE, escreva isso:
A cópia do código é a seguinte:
var myObject = document.getElementById ("mylabel");
var myAttribute = myObject.getAttribute ("htmlfor");
No Firefox, escreva o seguinte:
A cópia do código é a seguinte:
var myObject = document.getElementById ("mylabel");
var myAttribute = myObject.getAttribute ("para");
[Processamento de compatibilidade] A solução é primeiro determinar o tipo de navegador.
3. Acesso e definir propriedades da classe
[Nota de análise] Também porque a classe é o JavaScript reservado palavras, esses dois navegadores usam métodos JavaScript diferentes para obter essa propriedade.
Como escrever todas as versões do IE antes do IE8.0:
A cópia do código é a seguinte:
var myObject = document.getElementById ("cabeçalho");
var myAttribute = myObject.getAttribute ("ClassName");
Aplicável ao IE8.0 e ao Firefox Writing:
A cópia do código é a seguinte:
var myObject = document.getElementById ("cabeçalho");
var myAttribute = myObject.getAttribute ("classe");
Além disso, ao definir o atributo de classe usando o setAttribute (), os dois navegadores também têm a mesma diferença.
A cópia do código é a seguinte:
setattribute ("ClassName", valor);
Este método de escrita é aplicável a todas as versões do IE antes do IE8.0. NOTA: O IE8.0 não suporta o atributo "ClassName".
setattribute ("classe", valor); é adequado para IE8.0 e Firefox.
【Processamento compatível】
Método 1, escreva os dois:
A cópia do código é a seguinte:
var myObject = document.getElementById ("cabeçalho");
myObject.SetAttribute ("classe", "ClassValue");
myObject.SetAttribute ("ClassName", "ClassValue");
// defina a classe de cabeçalho para ClassValue
Método 2: IE e FF Support Object.ClassName, para que você possa escrevê -lo assim:
A cópia do código é a seguinte:
var myObject = document.getElementById ("cabeçalho");
myObject.className = "ClassValue"; // Defina a classe de cabeçalho como ClassValue
Método 3: Primeiro julgue o tipo de navegador e use o método de escrita correspondente de acordo com o tipo de navegador.
4. Problema de largura e altura do objeto
[Nota de análise] A declaração semelhante ao obj.style.Height = imgobj.Height in Firefox é inválida.
【Processamento compatível】 Use Obj.style.Height = imgobj.Height + 'PX';
5. Adicione estilos
[Nota de análise] No IE, use o método addRule () para adicionar estilos, como: stylesheet.addrule ("p", "cor: #ccc", stylesheet.length). No entanto, esse método não é compatível com FF e use o método insetrule () para substituí -lo em FF. Como Stylesheet.insertrule ("p {color: #ccc}", stylesheet.length).
【Processamento compatível】
A cópia do código é a seguinte:
if (stylesheet.insertrule) {
// Método insertrule ()
}outro{
// método addRule ()
}
6. Estilo final
[Nota de análise] Às vezes, nossos estilos personalizados falham porque ocorre a sobreposição de estilo, como o estilo definido por um seletor de classe e o estilo definido por um seletor de etiqueta, e o último é inválido no momento. Então o estilo final precisa ser usado. O estilo final do IE é escrito como ele.CurrentStyle. Nome do atributo. O método de escrita padrão no DOM é usar o objeto Document.DefaultView, como Document.DefaultView.getComputedStyle (ELEL, NULL), que é compatível com FF.
[Processamento de compatibilidade] Primeiro julgue o navegador (document.all) e, em seguida, execute o método acima.
3. Método DOM e referência de objeto
1. GetElementById
[Instruções de análise] Vamos dar uma olhada em um conjunto de códigos:
<!-Acesso ao objeto de entrada 1->
A cópia do código é a seguinte:
<entrada de entrada = "id" type = "Button"
value = "Clique em mim" ōnClick = "alert (id.value)"/>
No Firefox, o botão não responde, no IE, tudo bem, porque para o IE, o ID de um elemento HTML pode ser usado diretamente como um nome de variável no script, mas não no Firefox.
[Processamento de compatibilidade] Tente usar a escrita W3C DOM. Ao acessar objetos, use Document.getElementById ("ID") para acessar o objeto com ID e um ID deve ser único na página. Além disso, ao acessar objetos com um nome de tag, use document.getElementsByTagName ("div") [0]. Este método é suportado por mais navegadores.
<!-entrada de acesso ao objeto 2->
A cópia do código é a seguinte:
<input id = "id" type = "button" value = "clique em mim"
OnClick = "ALERT (document.getElementById ('id'). Value)" />
2. Acesso a objeto de classe de coleção
[Nota de análise] No IE, você pode usar () ou [] para obter o objeto da classe de coleta; Sob o Firefox, você só pode usar [] para obter o objeto de classe de coleta. como:
document.write (document.forms ("formname"). src);
// Este método de escrita pode acessar o atributo scc do objeto de formulário no IE
【Processamento de compatibilidade】 Alterar document.forms ("formname") para document.forms ["formname"]. Use [] para obter objetos de classe de coleta de maneira unificada.
3. Referência do quadro
[Nota de análise] O IE pode acessar o objeto de janela correspondente a esse quadro por meio de ID ou nome, enquanto o Firefox só pode acessar o objeto de janela correspondente a esse quadro através do nome.
Por exemplo, se a etiqueta do quadro acima for gravada no HTM na janela superior, você poderá acessá -la assim:
Ie: window.top.frameid ou window.top.frameName para acessar este objeto de janela;
Firefox: somente Window.top.FrameName pode ser usado para acessar este objeto de janela.
【Processamento compatível】 Use o nome do quadro para acessar objetos quadros. Além disso, o IE e o Firefox podem ser usados para fazer
window.document.getElementById ("frameId") para acessar esse objeto de quadro.
4. ParentElement
[Descrição da análise] O IE suporta o uso do parentelement e parentnode para obter nós dos pais. O Firefox só pode usar o pêlo.
[Processamento de compatibilidade] Porque o Firefox e o IE suportam o DOM, o pislenode é usado para acessar o nó pai.
5. Operação da tabela
[Nota de análise] Na tabela sob o IE, seja inserida com INNERHTML ou APENDCHILD, não tem efeito, mas outros navegadores o exibem normalmente.
[Processamento compatível] A solução é adicionar <tr> ao elemento <tbody> da tabela, como mostrado abaixo:
A cópia do código é a seguinte:
var row = document.createElement ("tr");
var celular = document.createElement ("td");
var Cell_Text = document.createTextNode ("Conteúdo inserido");
Cell.AppendChild (Cell_Text);
row.appendChild (célula);
document.getElementsByTagName ("tbody") [0] .appendChild (linha);
6. Remova os nós Removenode () e RemoveChild ()
[Nota de análise] Apêndnode pode ser usado normalmente no IE e no Firefox, mas o Removenode só pode ser usado no IE.
A função do método RemovenODe é excluir um nó, com a sintaxe sendo Node.reMemoveDode (false) ou node.reMovenode (true), e o valor de retorno é o nó excluído.
Removenode (false) significa que apenas o nó especificado é excluído e, em seguida, o nó filho original deste nó é promovido ao nó filho do nó pai original.
Removenode (true) significa excluir o nó especificado e todos os seus nós subordinados. O nó excluído se torna um nó órfão e não tem mais um nó filho e um nó pai.
[Processamento de compatibilidade] Os nós no Firefox não possuem um método RemoveroveDode, para que eles possam ser substituídos apenas pelo método removechild. Primeiro, retorne ao nó pai e remova o nó a ser removido do nó pai.
node.parentnode.removeChild (nó);
// Para usar o IE e o Firefox normalmente, pegue o nó pai da camada anterior e remova.
7. Nós obtidos por ChildNodes
[Observação da análise] O significado do subscrito de Childnodes é diferente no IE e no Firefox. Vamos dar uma olhada no seguinte código:
A cópia do código é a seguinte:
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<Tipo de entrada = Button Value = "Clique em mim!" ONCLICK =
"Alert (document.getElementById ('main'). ChildNodes.length)">
Correndo com IE e Firefox, respectivamente, o resultado do IE é 3, enquanto o Firefox é 7. O Firefox usa a especificação DOM e "#Text" significa texto (na verdade espaços sem sentido e quebras de linha etc.) também serão analisadas em um nó no Firefox. No IE, apenas texto com significado prático será analisado em "#Text".
【Processamento compatível】
Método 1: Ao obter nós filhos, você pode evitar esse problema por node.getElementsByTagName (). No entanto, o getElementsByTagName obviamente não é tão bom quanto o uso de ChildNodes para atravessar estruturas complexas de DOM, porque os Childnodes podem lidar melhor com a hierarquia DOM.
Método 2. Em uso real, quando o Firefox atravessando os nós filhos, você também pode adicioná -lo ao loop for:
if (ChildNode.nodename == "#text") continue; // ou use nodeType == 1.
Isso permite pular alguns nós de texto.
Leitura adicional
"Diferença entre Childnodes no IE e Firefox"
8. O Firefox não pode apoiar o InnerText
[Nota de análise] O Firefox não suporta o InnerText, ele suporta o TextContent para implementar o InnerText, mas o TextContent não considera elementos como o InnerText, por isso não é completamente compatível com o IE. Se você não usar o TextContent, a sequência não contém código HTML, que também pode ser substituído pelo InnerHTML. Você também pode escrever um método para implementá -lo, consulte o artigo "Implementando o atributo InnerText para o Firefox".
【Compare o processamento】 Compare julgando o tipo de navegador:
A cópia do código é a seguinte:
if (document.all) {
document.getElementById ('Element'). InnerText = "meu texto";
} outro{
document.getElementById ('elemento'). textContent = "meu texto";
}
4. Manuseio de eventos
Se o processamento de eventos estiver envolvido ao usar o JavaScript, você precisará conhecer as diferenças entre os eventos em diferentes navegadores. Existem três modelos principais de eventos JavaScript (consulte "Suportando três modelos de eventos ao mesmo tempo", que são NN4, IE4+ e W3C/Safar.
1. Window.Event
【Instruções de análise】 Veja um pedaço de código primeiro
A cópia do código é a seguinte:
função et ()
{
alerta (evento); // ou seja: [objeto]
}
O resultado do código acima em execução no IE é [objeto], mas não pode ser executado no Firefox.
Como o evento pode ser usado diretamente como propriedade de um objeto de janela no IE, mas no Firefox, o modelo W3C é usado, que propaga eventos através do método de passagem de parâmetros, ou seja, você precisa fornecer uma interface de resposta a eventos para sua função.
[Processamento de compatibilidade] Adicione o julgamento do evento e obtenha o evento correto de acordo com o navegador:
A cópia do código é a seguinte:
função et ()
{
EVT = EVT? EVT: (Window.Event? Window.Event: NULL);
// Compatível com IE e Firefox
alerta (EVT);
}
2. Aquisição do valor do teclado
[Observação da análise] Os métodos de obtenção de valores de teclado do IE e Firefox são diferentes. Pode -se entender que o evento. Que sob o Firefox é equivalente ao evento. Para as diferenças um do outro, consulte "Teste de compatibilidade para o KeyCode, que e Charcode em eventos do teclado"
【Processamento compatível】
A cópia do código é a seguinte:
função myKeypress (evt) {
// Compatível com o IE e o Firefox para obter o objeto de teclado
EVT = (EVT)? EVT: ((Window.Event)? Window.Event: "")
// Compatível com o IE e o Firefox para obter o valor da chave do objeto de teclado
var key = evt.Keycode? Evt.KeyCode: Evt.Which;
if (evt.ctrlkey && (key == 13 || key == 10)) {
// Ctrl e Enter foram pressionados ao mesmo tempo
// Faça algo;
}
}
3. Obter fonte de evento
[Nota de análise] Ao usar os delegados de eventos, podemos determinar qual elemento o evento vem da aquisição da fonte do evento. No entanto, no IE, o objeto de evento possui uma propriedade SRCELEMENT, mas nenhuma propriedade de destino; No Firefox, o objeto uniforme possui uma propriedade de destino, mas nenhuma propriedade SRCELEMENT.
【Processamento compatível】
A cópia do código é a seguinte:
ele = função (evt) {// captura o objeto que o evento atual está atuando
evt = evt || window.event;
Retornar
(obj = event.srcelement? Event.srcelement: event.target;);
}
4. Monitoramento de eventos
[Nota de análise] Em termos de escuta e processamento de eventos, o IE fornece duas interfaces: AnexeEvent e Detachevent, enquanto o Firefox fornece addEventListener e removeeventListener.
[Processamento de compatibilidade] O processamento de compatibilidade mais simples é encapsular esses dois conjuntos de interfaces:
A cópia do código é a seguinte:
função addEvent (elem, eventname, manipulador) {
if (elem.attachevent) {
elem.attachevent ("on" + eventName, function () {
handler.call (elem)});
// Use a chamada de função de retorno de chamada () aqui, deixe este ponto para elem
} else if (elem.addeventListener) {
elem.addeventListener (EventName, Handler, false);
}
}
função removervent (elem, eventname, manipulador) {
if (elem.detachevent) {
elem.detachevent ("on" + eventname, function () {
handler.call (elem)});
// Use a chamada de função de retorno de chamada () aqui, deixe este ponto para elem
} else if (elem.removeEventListener) {
Elem.removeEventListener (EventName, Handler, False);
}
}
Deve -se notar que, sob o Firefox, isso na função de manuseio de eventos aponta para o próprio elemento escutado, mas no IE, você pode usar a chamada da função de retorno de chamada para permitir que o contexto atual aponte para o elemento escuta.
5. Posição do mouse
[Nota de análise] No IE, o objeto uniforme possui atributos X e Y, mas não há atributos PageX e Pagey; Sob o Firefox, o objeto uniforme possui atributos PageX e Pagey, mas nenhum atributo X e Y.
[Processamento de compatibilidade] Use Mx (mx = event.x? Event.x: event.pagex;) para substituir o evento.x sob o ie ou event.pagex sob o firefox. A posição absoluta deve ser considerada em pontos complexos
A cópia do código é a seguinte:
função getabspoint (e) {
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.OffSettop;
}
alerta ("x:" + x + "," + "y:" + y);
}
5. Tratamento de compatibilidade de outras diferenças
1. XmlHttPrequest
[Nota de análise] New ActiveXObject ("Microsoft.xmlHttp"); só funciona no ie. O Firefox não o suporta, mas suporta xmlHttPrequest.
【Processamento compatível】
A cópia do código é a seguinte:
função createxhr () {
var xhr = nulo;
if (window.xmlhttprequest) {
xhr = new ActiveXObject ("msxml2.xmlHttp");
}outro{
tentar {
xhr = new ActiveXObject ("Microsoft.xmlHttp");
}
pegar() {
xhr = nulo;
}
}
se (! xhr) retornar;
retornar xhr;
}
2. Janelas modais e não modais
[Nota de análise] Em IE, janelas modais e não modais podem ser abertas através do ShowModaldialog e ShowModlessDialog, mas o Firefox não as suporta.
[Solução] Use Window.open (Pageurl, nome, parâmetros) para abrir uma nova janela. Se você precisar passar os parâmetros, poderá usar o quadro ou iframe.
3.
A propriedade Input.Type sob o IE é somente leitura, mas pode ser modificada no Firefox.
4. Operação de opção no elemento Selecionar
Opções definidas, ou seja, o Firefox estão escritas de maneira diferente:
Firefox: pode ser definido diretamente
A cópia do código é a seguinte:
option.Text = 'Fooooooooo';
IE: Apenas definido
A cópia do código é a seguinte:
option.innerhtml = 'foooooooo';
Método para excluir uma opção Selecionar:
Firefox: Sim
A cópia do código é a seguinte:
select.Options.Remove (SelectedIndex);
IE7: pode ser usado
A cópia do código é a seguinte:
select.options [i] = null;
IE6: preciso escrever
A cópia do código é a seguinte:
select.options [i] .outerhtml = null;
5. Análise dos objetos IMG Alt e título
[Nota de análise] O objeto IMG possui dois atributos: alt e título. A diferença é que alt: um prompt quando a foto não existe ou a carga está incorreta.
Título: A descrição da foto da foto. Se o título não for definido no IE, o ALT também poderá ser usado como a ponta do IMG, mas no Firefox, ambos serão usados exatamente de acordo com a definição no padrão.
Ao definir um objeto IMG.
[Processamento compatível] É melhor escrever todos os objetos ALT e Título para garantir que eles possam ser usados normalmente em vários navegadores.
6. Problema de atualização do SRC da IMG
[Instruções de análise] Vamos dar uma olhada no código primeiro:
A cópia do código é a seguinte:
<img id = "pic" onclick = "this.src = 'a.jpg'" src = "aa.jpg" style = "cursor: ponteiro"/>
No IE, esse código pode ser usado para atualizar imagens, mas não sob o Firefox. É principalmente um problema de cache.
[Processamento de compatibilidade] Adicionando um número aleatório após o endereço resolver:
A cópia do código é a seguinte:
<img id = "pic" onclick = "javascript: this.src = this.src+'?
Resumir
Existem muitas diferenças no JavaScript entre o IE e o Firefox. Para ser compatível, acho que é necessário organizar alguns comuns em uma biblioteca JS, como operações DOM, processamento de eventos, solicitações xmlHttPrequest, etc., ou você também pode optar por usar algumas bibliotecas existentes (como jQuery, yui, extjs, etc.). No entanto, acho que ainda é necessário entender essas diferenças, o que é muito útil para participarmos do código de compatibilidade e usabilidade.
Sempre há mais soluções do que problemas. Não importa como o navegador seja compatível, o desenvolvimento do front-end sempre pode ser resolvido!