Uma breve análise de questões de compatibilidade do navegador em JavaScript

Os problemas de compatibilidade do navegador são uma parte fácil de ignorar, mas mais importante, no desenvolvimento real. Antes de falarmos sobre as questões de compatibilidade das versões antigas dos navegadores, devemos primeiro entender o que é a detecção de capacidade. É para detectar se o navegador possui esses recursos, ou seja, determinar se o navegador atual suporta os atributos ou métodos a serem chamados. Aqui estão algumas breves apresentações.

1. InnerText e InnerContent

1) As funções do InnerText e InnerContent são as mesmas

2) Suporte ao navegador InnerText antes do IE8

3) Versão antiga do Firefox INNERCONTENT do Firefox

4) A nova versão do navegador suporta os dois métodos

 1 // A versão antiga dos navegadores é compatível com o InnerText e o InnerContent2 if (element.TextContent) {3 Return Element.TextContent; 4} else {5 Return element.innerText; 6}

2. Obtenha problemas de compatibilidade dos nós do irmão/elementos

1) nós do irmão, todos os navegadores suportam

①Extslibling o próximo nó do irmão, que pode ser um nó não eleitoral; Um nó de texto será obtido

Anteflibling O nó de irmão anterior pode ser um nó não eleitoral; O nó de texto será obtido

2) Elementos do irmão, IE8 não apoiou antes

① Anteriorsibling Obtenha o próximo elemento do próximo irmão e ignora os espaços em branco

②nextElementsibling Obtenha o próximo elemento de irmão adjacente e ignora os espaços em branco

 // navegador compatível // obtenha a próxima função de elemento de irmãos getNextElement (element) {// Detecção de capacidade if (element.nextElementsibling) {return element.nextElementsibling; } else {var node = element.nextsbling; while (node ​​&& node.nodetype! == 1) {node = node.nextbling; } retornar o nó; }}

 /*** Retorne o elemento anterior*elemento @param*@RETURNS {*}*/function getPreviousElement (element) {if (element.previousElementsibling) {return element.previousElementsibling; } else {var el = element.previoussibling; while (el && el.nodetype! == 1) {el = el.previoussibling; } retornar el; }}

 /*** navegador compatível com o primeiro elemento FirstElementChild*@param pai*@returns {*}*/function getFirstElement (parent) {if (parent.firstElementChild) {return parent.firstElementChild; } else {var el = parent.firstchild; while (el && el.nodetype! == 1) {el = el.nextsibling; } retornar el; }}

 /*** Retorne o último elemento*@param pai*@RETURNS {*}*/função getLastElement (parent) {if (parent.lastelementChild) {return parent.lastelementChild; } else {var el = parent.lastChild; while (el && el.nodetype! == 1) {el = el.previoussibling; } retornar el; }}

 /*** Obtenha todos os elementos irmãos do elemento atual*@param elemento*@RETURNS {Array}*/função irmão (elemento) {if (! Element) return; var elements = []; var el = element.previoussibling; while (el) {if (el.nodetype === 1) {elements.push (el); } el = el.previoussibling; } el = element.previoussibling; while (el) {if (el.nodetype === 1) {elements.push (el); } el = el.nextsibling; } el = element.previoussibling; } retornar elementos;}

3. Array.Filter ();

// Teste todos os elementos com a função especificada e crie uma nova matriz contendo todos os elementos que passaram no teste

 // compatível com o ambiente antigo if (! Array.prototype.Filter) {Array.prototype.Filter = function (fun/ *, thisArg */) {"use Strict"; if (this === void 0 || this === null) lança novo typeError (); var t = objeto (this); var len = t.Length >>> 0; if (typeof diversão! == "function") lança novo typeError (); var res = []; var thisArg = argumentos.Length> = 2? argumentos [1]: vazio 0; for (var i = 0; i <len; i ++) {if (i in t) {var val = t [i]; // Nota: Tecnicamente, isso deve objetar.DefineProperty em // O próximo índice, pois o push pode ser afetado por // propriedades no object.prototype e Array.prototype. // Mas o novo método é novo e as colisões devem ser raras, portanto, use a alternativa mais compatível. if (fun.call (thisarg, val, i, t)) res.push (val); }} retornar res; };}

4. Array.ForEach ();

// Traverse Array

 // Compatível com ambientes antigos // Etapas de produção do ECMA-262, Edição 5, 15.4.4.18// Referência: http://es5.github.io/#x15.4.18if (! Array.prototype.foreach) {Array.protype.ForEach = FUNCLABE (Callback, thisarg) {Varg) {vary.ProType.Each = FUNCLABE (TOTARG) {VARG) {VARG) {vary.ProType.Each. if (this == null) {tiro o novo TypeError ('Isso é nulo ou não definido'); } // 1. Seja o o resultado de chamar ToObject () Passar o // | this | valor como argumento. var o = objeto (this); // 2. Seja LenValue o resultado de chamar o método get () interno // de O com o argumento de "comprimento". // 3. Seja Len Touint32 (LenValue). var len = O.Length >>> 0; // 4. Se é considerado (retorno de chamada) for falso, jogue uma exceção do TypeError. // Consulte: http://es5.github.com/#x9.11 se (typeof chamada de retorno! == "function") {tiro o novo TypeError (retorno de chamada + 'não é uma função'); } // 5. Se essearg foi fornecido, seja t thisArg; caso contrário, vamos // não é definido. if (argumentos.Length> 1) {t = thisArg; } // 6. Seja k 0 k = 0; // 7. Repita, enquanto k <len while (k <len) {var kValue; // a. Seja PK ToString (K). // Isso está implícito para os operadores LHS do operador in // b. Seja Kpresess o resultado de chamar o HasProperty // Método Interno de O com o argumento PK. // Esta etapa pode ser combinada com c // c. Se Kpresess for verdadeiro, então se (k em o) {// i. Seja KValue o resultado de chamar o método Get Internal // de O com o argumento PK. kValue = O [k]; // ii. Ligue para o método interno de chamada de retorno de chamada com t como // o valor e a lista de argumentos contendo KValue, K e O. retorno de chamada.Call (T, KValue, K, O); } // d. Aumente k em 1. K ++; } // 8. Retorne indefinido};}

5. Evento de registro

.AddeventListener = function (tipo, ouvinte, usecapture) {};

// O primeiro nome do evento de parâmetro

// a segunda função de manipulador de eventos de parâmetro (ouvinte)

// O terceiro parâmetro true captura bolha falsa

// só será suportado após o IE9

// compatível com ambientes antigos

 var eventTools = {addEventListener: function (elemento, eventName, ouvinte) {// detecção de capacidade if (element.addeventListener) {element.addeventListener (eventName, ouvinte, false); } else if (element.attachevent) {element.attachevent ("on" + eventName, ouvinte); } else {element ["on" + eventName] = ouvinte; }}, // Se você deseja remover eventos, não poderá usar a função anônima RemovaventListener: function (elemento, eventname, ouvinte) {if (element.RemoveEventListener) {element.removeEventListener (eventName, ouvinte, false); } else if (element.detachevent) {// ie8 antes de se registrar.attachevent e remover events.detachevent element.detachevent ("on"+eventname, ouvinte); } else {element ["on" + eventName] = null; }}};

6. Objeto de evento

1) O parâmetro de evento e é o objeto de evento, o método de aquisição padrão

btn.OnClick = function (e) {}

2) E.EventPhase Event Stage, IE8 não o apoiou antes

3) E.Target é sempre o objeto que aciona o evento (botão clicado)

i) antes do ie8 srcement

ii) compatível com o navegador

VAR Target = E.Target || Window.Event.SrceMement;

 // Obter objeto de evento compatível com o navegador getEvent: function (e) {return e || Window.Event; // maneira padrão de obter objeto de evento e; Window.Event A maneira de obter objeto de evento antes de ie8} // compatível com o Target GetTarget: function (e) {return E.Target || E.Srcelement; }

7. Obtenha a posição do mouse na página

① Posição na área visual: e.clientX e.clienty

② Localização no documento:

i) E.Pagex E.Pagey

ii) compatível com o navegador

 var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; var pagey = e.clienty + scrolltop;

8. Obtenha a distância para rolar

 // navegador compatível var scrolltop = document.documentElement.Scrolltop || document.body.scrolltop;

9. Cancelar a seleção do texto

 // compatível com a janela do navegador.getSelection? window.getSelection (). removeallLanges (): document.selection.empty ();

[Resumo] Este é apenas um resumo parcial e você também encontrará vários problemas de compatibilidade do navegador durante o desenvolvimento real. Diferentes navegadores também encontrarão diferentes problemas de adaptação no PC e nos telefones celulares. Eles estão esperando o lugar das crianças descobrir e resumir ~~ Espero que possa ajudá -lo. Por favor me dê alguns conselhos sobre as deficiências ~~~

A breve análise acima dos problemas de compatibilidade dos navegadores em JavaScript é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.