Une brève analyse des problèmes de compatibilité des navigateurs dans les compétences JavaScript_javascript

Les problèmes de compatibilité des navigateurs sont facilement négligés, mais constituent la partie la plus importante du développement réel. Avant de parler du problème de compatibilité avec les anciennes versions des navigateurs, nous devons d'abord comprendre ce qu'est la détection de capacité. Elle est utilisée pour détecter si le navigateur possède cette capacité, c'est-à-dire pour déterminer si le navigateur actuel prend en charge l'attribut ou la méthode à utiliser. appelé. Vous trouverez ci-dessous quelques brèves introductions.

1. innerText et innerContent
1) innerText et innerContent ont la même fonction
2) innerText est pris en charge par les navigateurs antérieurs à IE8
3) innerContent est pris en charge par les anciennes versions de Firefox
4) La nouvelle version du navigateur prend en charge les deux méthodes

1 // 老版本浏览器兼容 innerText 和 innerContent
2 if (element.textContent) {
3    return element.textContent ;
4  } else {
5    return element.innerText;
6  }

2. Problèmes de compatibilité lors de l'obtention de nœuds/éléments frères
1) Noeud Brother, tous les navigateurs prennent en charge
​​​​ ①nextSibling Le nœud frère suivant peut être un nœud non-élément ; le nœud texte
sera obtenu ②previousSibling Le nœud frère précédent peut être un nœud non-élément ; le nœud texte
sera obtenu. 2) Élément Brother, IE8 ne le supportait pas avant

①previousElementSibling Récupère l'élément frère précédent et ignore les espaces vides
②NEXTELEMENTSIBLING pour obtenir le prochain élément frère voisin, il ignorera le blanc

//兼容浏览器
// 获取下一个紧邻的兄弟元素
function getNextElement(element) {
  // 能力检测
 if(element.nextElementSibling) {
   return element.nextElementSibling;
  } else {
     var node = element.nextSibling;
     while(node && node.nodeType !== 1) {
         node = node.nextibling;
     }
     return node;
  }
 }

/**
* 返回上一个元素
* @param element
* @returns {*}
*/
function getPreviousElement(element) {
  if(element.previousElementSibling) {
    return element.previousElementSibling;
  }else {
    var el = element.previousSibling;
    while(el && el.nodeType !== 1) {
      el = el.previousSibling;
      }
    return el;
  }
}

/**
* 返回第一个元素firstElementChild的浏览器兼容
* @param parent
* @returns {*}
*/
function getFirstElement(parent) {
  if(parent.firstElementChild) {
    return parent.firstElementChild;
  }else {
    var el = parent.firstChild;
    while(el && el.nodeType !== 1) {
      el = el.nextSibling;
      }
    return el;
  }
}

/**
* 返回最后一个元素
* @param parent
* @returns {*}
*/
function getLastElement(parent) {
  if(parent.lastElementChild) {
    return parent.lastElementChild;
  }else {
    var el = parent.lastChild;
    while(el && el.nodeType !== 1) {
      el = el.previousSibling;
      }
    return el;
  }
}

/**
*获取当前元素的所有兄弟元素
* @param element
* @returns {Array}
*/
function sibling(element) {
  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;
  }
    return elements;
}

3. array.filter();
// Teste tous les éléments en utilisant la fonction spécifiée et crée un nouveau tableau contenant tous les éléments qui réussissent le test

// 兼容旧环境
if (!Array.prototype.filter)
{
 Array.prototype.filter = function(fun /*, thisArg */)
 {
  "use strict";
  if (this === void 0 || this === null)
   throw new TypeError();
  var t = Object(this);
  var len = t.length >>> 0;
  if (typeof fun !== "function")
   throw new TypeError();
  var res = [];
  var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
  for (var i = 0; i < len; i++)
  {
   if (i in t)
   {
    var val = t[i];
    // NOTE: Technically this should Object.defineProperty at
    //    the next index, as push can be affected by
    //    properties on Object.prototype and Array.prototype.
    //    But that method's new, and collisions should be
    //    rare, so use the more-compatible alternative.
    if (fun.call(thisArg, val, i, t))
     res.push(val);
   }
  }
  return res;
 };
}

4. array.forEach();
// Parcours du tableau

//兼容旧环境
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {
 Array.prototype.forEach = function(callback, thisArg) {
  var T, k;
  if (this == null) {
   throw new TypeError(' this is null or not defined');
  }
  // 1. Let O be the result of calling toObject() passing the
  // |this| value as the argument.
  var O = Object(this);
  // 2. Let lenValue be the result of calling the Get() internal
  // method of O with the argument "length".
  // 3. Let len be toUint32(lenValue).
  var len = O.length >>> 0;
  // 4. If isCallable(callback) is false, throw a TypeError
  exception. // See: http://es5.github.com/#x9.11
  if (typeof callback !== "function") {
   throw new TypeError(callback + ' is not a function');
  }
  // 5. If thisArg was supplied, let T be thisArg; else let
  // T be undefined.
  if (arguments.length > 1) {
   T = thisArg;
  }
  // 6. Let k be 0
  k = 0;
  // 7. Repeat, while k < len
  while (k < len) {
   var kValue;
   // a. Let Pk be ToString(k).
   //  This is implicit for LHS operands of the in operator
   // b. Let kPresent be the result of calling the HasProperty
   //  internal method of O with argument Pk.
   //  This step can be combined with c
   // c. If kPresent is true, then
   if (k in O) {
    // i. Let kValue be the result of calling the Get internal
    // method of O with argument Pk.
    kValue = O[k];
    // ii. Call the Call internal method of callback with T as
    // the this value and argument list containing kValue, k, and O.
    callback.call(T, kValue, k, O);
   }
   // d. Increase k by 1.
   k++;
  }
  // 8. return undefined
 };
}

5. Événement d'inscription
.addEventListener = function (type,listener,useCapture ) { }; //Nom de l'événement du premier paramètre
//Fonction de gestion des événements du deuxième paramètre (écouteur)
//Le troisième paramètre vrai capture les faux bouillonnements
//Uniquement pris en charge après IE9
// Compatible avec les anciens environnements

var EventTools = {
    addEventListener: function (element, eventName, listener) {
      //能力检测
      if(element.addEventListener) {
        element.addEventListener(eventName, listener,false);
      }else if(element.attachEvent) {
        element.attachEvent("on" + eventName, listener);
      }else{
        element["on" + eventName] = listener;
      }
    },

//  想要移除事件，不能使用匿名函数
    removeEventListener: function (element, eventName, listener) {
      if(element.removeEventListener) {
        element.removeEventListener(eventName,listener,false);
      }else if(element.detachEvent) { //IE8以前注册.attachEvent和移除事件.detachEvent
        element.detachEvent("on"+eventName,listener);
      }else{
        element["on" + eventName] = null;
      }
    }
  };

6. Objet événement

1) Le paramètre événementiel e est l'objet événement, la méthode d'acquisition standard
btn.onclick = fonction(e) { }
2) Phase d'événement e.eventPhase, qui n'était pas prise en charge avant IE8
3)e.target est toujours l'objet qui déclenche l'événement (le bouton cliqué)
i) Avant IE8 srcElement
​​​​ ii) Compatible avec les navigateurs
var cible = e.target || window.event.srcElement;

// 获取事件对象 兼容浏览器
 getEvent: function(e) {
  return e || window.event; // e事件对象 标准的获取方式； window.event IE8以前获取事件对象的方式
 }
// 兼容target
 getTarget: function(e) {
  return e.target || e.srcElement;
 }

7. Obtenez la position de la souris sur la page

①Position dans la zone visible : e.clientX e.clientY
②Position dans le document :
i) e.pageX e.pageY
​​​​ ii) Compatible avec les navigateurs

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var pageY = e.clientY + scrollTop;

8. Obtenez la distance de défilement de la page

 // 兼容浏览器
 var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;

9. Annuler la sélection de texte

// 兼容浏览器
 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

[Résumé] Voici juste un résumé partiel. Dans le développement réel, divers problèmes de compatibilité des navigateurs seront également rencontrés. Différents navigateurs rencontreront également différents problèmes d'adaptation sur PC et téléphones mobiles. Ceux-ci sont à explorer et à résumer ensemble par les enfants ~~ J'espère que cela pourra aider tout le monde. Veuillez me donner plus de conseils sur les lacunes ~~~

.

La brève analyse ci-dessus des problèmes de compatibilité des navigateurs en JavaScript est tout le contenu partagé par l'éditeur. J'espère qu'elle pourra vous donner une référence et j'espère que vous soutiendrez Script Home.