Eine kurze Analyse von Browserkompatibilitätsproblemen in JavaScript_Javascript-Kenntnissen

Probleme mit der Browserkompatibilität werden leicht übersehen, sind aber der wichtigste Teil in der eigentlichen Entwicklung. Bevor wir über das Kompatibilitätsproblem mit älteren Browserversionen sprechen, müssen wir zunächst verstehen, was die Fähigkeitserkennung ist. Sie wird verwendet, um zu erkennen, ob der Browser über diese Fähigkeit verfügt, d. h. um zu bestimmen, ob der aktuelle Browser das zu verwendende Attribut oder die zu verwendende Methode unterstützt angerufen. Nachfolgend finden Sie einige kurze Einführungen.

1. innerText und innerContent
1) innerText und innerContent haben die gleiche Funktion
2) innerText wird von Browsern vor IE8
unterstützt 3) innerContent wird von älteren Versionen von Firefox unterstützt
4) Die neue Version des Browsers unterstützt beide Methoden

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

2. Kompatibilitätsprobleme beim Erhalten von Geschwisterknoten/-elementen
1) Brother-Knoten, alle Browser unterstützen
①nextSibling Der nächste Geschwisterknoten kann ein Nicht-Elementknoten sein. Der Textknoten
wird abgerufen ② previousSibling Der vorherige Geschwisterknoten kann ein Nicht-Elementknoten sein. Der Textknoten
wird abgerufen 2) Brother Element, IE8 hat es vorher nicht unterstützt

① previousElementSibling Ruft das vorherige Geschwisterelement ab und ignoriert Leerzeichen
②NEXTELEMENTSIBLING Um das nächste benachbarte Bruderelement abzurufen, wird das Leerzeichen

ignoriert

//兼容浏览器
// 获取下一个紧邻的兄弟元素
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(); // Alle Elemente mit der angegebenen Funktion testen und ein neues Array erstellen, das alle Elemente enthält, die den Test bestehen

// 兼容旧环境
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();

// Das Array durchlaufen

//兼容旧环境
// 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. Registrierungsveranstaltung

.addEventListener = function (type,listener,useCapture) { }; //Erster Parameter-Ereignisname
//Zweiter Parameter-Ereignisbehandlungsfunktion (Listener)
//Der dritte Parameter true erfasst falsches Sprudeln
//Nur unterstützt nach IE9
// Kompatibel mit alten Umgebungen

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. Ereignisobjekt

1) Der Ereignisparameter e ist das Ereignisobjekt, die Standarderfassungsmethode

btn.onclick = function(e) { }
2) e.eventPhase-Ereignisphase, die vor IE8 nicht unterstützt wurde
3)e.target ist immer das Objekt, das das Ereignis auslöst (die angeklickte Schaltfläche)
i) Vor IE8 srcElement
​​​​ ii) Browserkompatibel
var target = 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. Ermitteln Sie die Position der Maus auf der Seite

①Position im sichtbaren Bereich: e.clientX e.clientY

②Position im Dokument:
i) e.pageX e.pageY
​​​​ ii) Browserkompatibel

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

8. Ermitteln Sie die Scrolldistanz der Seite

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

9. Textauswahl abbrechen

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

[Zusammenfassung] Dies ist nur eine teilweise Zusammenfassung. Bei der tatsächlichen Entwicklung werden auch verschiedene Browserkompatibilitätsprobleme auftreten. Verschiedene Browser werden auch auf PCs und Mobiltelefonen auf unterschiedliche Anpassungsprobleme stoßen. Diese sind für Kinder zum Erkunden und Zusammenfassen gedacht. ~~ Ich hoffe, es kann allen helfen. Bitte geben Sie mir weitere Ratschläge zu den Mängeln

Die obige kurze Analyse von Browserkompatibilitätsproblemen in JavaScript ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.