Zusammenfassung der browserkompatiblen JS-Schreibmethoden_Javascript-Fähigkeiten

1. Elementsuchproblem
1. document.all[name]
(1)Bestehendes Problem: Firefox unterstützt document.all[name]
nicht (2) Lösung: Verwenden Sie stattdessen getElementsByName(name), getElementById(id) usw.

2. Problem mit dem Sammelobjekt
(1) Bestehendes Problem: Sie können () verwenden, um auf viele Sammlungsobjekte im IE zuzugreifen, aber Sie können [] nur in Firefox verwenden.
Beispiel: document.forms("formName") kann im IE verwendet werden, um das Formular mit dem Namen „formName“ zurückzugeben, funktioniert aber in Firefox nicht.
(2) Lösung: Verwenden Sie [], im obigen Beispiel kann es in document.forms["formName"]

geändert werden

3. Die ID des HTML-Elements ist in JavaScript sichtbar
(1) Bestehendes Problem: Die ID im HTML-Element im IE kann direkt als untergeordneter Objektvariablenname des Dokuments verwendet werden. In Firefox nicht möglich.
(2) Lösung: Verwenden Sie getElementById("idName") anstelle von idName als Objektvariable.

4. eval(idName) ruft das Objekt ab
(1) Bestehendes Problem: Im IE können Sie eval(idName) verwenden, um das HTML-Objekt mit der ID idName abzurufen, jedoch nicht in Firefox.
(2) Lösung: Verwenden Sie getElementById(idName) anstelle von eval(idName).

5. Der Variablenname ist derselbe wie eine HTML-Objekt-ID
(1) Bestehendes Problem: Da in Firefox die Objekt-ID nicht als Name des HTML-Objekts verwendet wird, können Sie denselben Variablennamen wie die HTML-Objekt-ID verwenden, jedoch nicht im IE.
(2) Lösung: Fügen Sie beim Deklarieren von Variablen immer var hinzu, um Mehrdeutigkeiten zu vermeiden, damit sie auch im IE normal ausgeführt werden können. Darüber hinaus ist es am besten, nicht denselben Variablennamen wie die HTML-Objekt-ID zu verwenden, um Fehler zu reduzieren.

Hinweis: 3, 4 und 5 gehören alle zur gleichen Fragenkategorie.

6. Rahmen
(1) Bestehendes Problem: Im IE können Sie window.top.frameId und window.top.frameName verwenden, um das durch den Frame dargestellte Fenster abzurufen. In Firefox können Sie nur window.top.frameName verwenden.
(2) Lösung: Stellen Sie die ID und den Namen des Frames gleich ein und verwenden Sie window.top.frameName, um auf den Frame zuzugreifen.

2. DOM-Betrieb
1. Legen Sie den Textinhalt des Elements fest.
(1) Bestehendes Problem: IE verwendet innerText, während Firefox textContent verwendet, um den Textinhalt von Elementen festzulegen.
(2) Lösung: Wenn der Textinhalt keine Sonderzeichen wie „f149dc6bf831fc1a1cb4bb71ef737d5a“ enthält, können Sie innerHTML verwenden. Andernfalls können Sie Folgendes verwenden:
 

   var child = elem.firstChild;
      if (child != null) elem.removeChild(child);
      elem.appendChild(document.createTextNode(content));

2. parentElement, parent.children
(1) Bestehendes Problem: IE kann parentElement verwenden, um den übergeordneten Knoten abzurufen, und parent.children, um alle untergeordneten Knoten des Knotens abzurufen. Wird von Firefox nicht unterstützt.
(2) Lösung: Verwenden Sie parentNode und parent.childNodes.

3. Erläuterung der ChildNodes.
(1) Bestehendes Problem: Die Interpretation von childNodes ist in IE und Firefox unterschiedlich. IE enthält keine leeren Textknoten, Firefox jedoch.
(2) Lösung: Verwenden Sie childNodes, um Textknoten wie folgt zu filtern:

   var children = elem.childNodes;
     for (i = 0; i < children.length; i++) {
      if (children[i].nodeType != 3) { // 过滤文本结点
       // ...
      }
     }

4. Erläuterung von document.getElementsByName.
(1) Bestehendes Problem: getElementsByName prüft im IE nur die Elemente d5fd7aea971a85678ba271703566ebfd, unter Firefox jedoch alle Elemente.
(2) Lösung: Verwenden Sie getElementsByName nicht, um andere Elemente als d5fd7aea971a85678ba271703566ebfd zu überprüfen. Wenn Sie ein einzelnes Element abrufen möchten, versuchen Sie, getElementById zu verwenden.

5. Erläuterung von document.getElementById.
(1) Bestehendes Problem: getElementById im IE prüft nicht nur das Id-Attribut, sondern auch das Name-Attribut. Wenn das Name-Attribut mit dem Parameter übereinstimmt, wird das Element ebenfalls zurückgegeben. In Firefox wird nur das Id-Attribut überprüft.
(2) Lösung: Versuchen Sie, die ID und den Namen gleich zu halten, und machen Sie das Namensattribut eines Elements nicht mit dem ID-Attribut eines anderen Elements identisch.

3. Veranstaltungen
1. Event.x- und event.y-Probleme
(1) Bestehendes Problem: Im IE hat das Ereignisobjekt x- und y-Attribute, in Firefox jedoch nicht.
(2) Lösung: In Firefox ist das Äquivalent von event.x event.pageX. Kann verwendet werden:
mX = event.x ? event.x : event.pageX;

2. window.event

(1) Bestehendes Problem: Die Verwendung von window.event kann nicht unter Firefox ausgeführt werden
(2)Lösung:
Originalcode (kann im IE ausgeführt werden):

   <input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
      ...
      <script language="javascript">
        function gotoSubmit() {
          ...
          alert(window.event);  // use window.event
          ...
        }
      </script>

Neuer Code (funktioniert in IE und Firefox):

3. attachEvent和addEventListener
  (1)现有问题：IE中使用attachEvent来添加事件，Firefox中使用addEventListener。
  (2)解决方法：如下，注意事件参数的区别，一个是click，一个是onclick。
        if (document.attachEvent) document.attachEvent("click", clickHandler,false);
        else document.addEventListener("onclick",clickHandler);

四、语法
1. const
  (1)现有问题：在IE中不能使用const关键字。如const constVar = 32;在IE中这是语法错误。
  (2)解决方法：不使用const，以var代替。

2. 多余的逗号
  (1)现有问题：firefox中对象文字常量容许多余的逗号，在IE中不允许。下面语句在IE中非法。
      var obj = { 'key' : 'aaa', }
  (2)解决方法：去掉多余逗号。 

五、XML
1. 创建XMLHttpRequest
  (1)现有问题：Firefox使用XMLHttpRequest，IE使用ActiveXObject。
  (2)解决方法：  

  if (window.XMLHttpRequest) {
     req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
     req = new ActiveXObject("Microsoft.XMLHTTP");
   }

2. 创建DOM
  (1)现有问题：Firefox和IE创建DOM的方式不同。
  (2)解决方法：      

 function createXmlDom() {
     var oXmlDom;
     if (Window.ActiveXObject) { // IE
      oXmlDom = new ActiveXObject("Microsoft.XmlDom");
     } else { // Firefox
      oXmlDom = document.implementation.createDocument("", "", null);
     }
    }

3. 加载XML
  (1)现有问题：如果要加载外部文件IE和Firefox都可以用:
          oXmlDom.async=false;      // 这在Firefox中是必须的
          oXmlDom.load("test.xml");
     但是它们加载xml字符串的方式不一样，IE中直接可以使用oXmlDom.loadXML("4216313e5055da45c6d0ded129c5d6443e8e92382b62183bf2604fde8a42078bc02ae4fdd442eb2210bebb17feeb95b4")，而Firefox要使用DOMParser:
        var oParser = new DOMParser();
          var oXmlDom = oParser.parseFromString("66efc7746bfc38acf99d97c3d23ab9c7", "text/xml");
  (2)解决方法：比较好的方法是给Firefox产生的XMLDom加上loadXML方法：
        if (isFirefox) { // 需要浏览器检测   

    Document.prototype.loadXML = function(sXml) {
      var oParser = new DOMParser();
      var oXmlDom = oParser.parseFromString(sXml, "text/xml");
      
      while (this.firstChild) this.removeChild(this.firstChild);
      
      for (var i = 0; i < oXmlDom.childNodes.length; i++) {
       var oNewNode = this.importNode(oXmlDom.childNodes[i], true);
       this.appendChild(oNewNode);
      }
     }
    }

      这样在IE和Firefox就可以调用loadXML方法了。

4. XPath支持
  (1)现有问题：IE中可以直接用XmlDOM的selectNodes来根据XPath表示式来选择结点，Firefox则比较复杂，需要使用XPathEvaluator。
     IE:    

  var lstNodes = oXmlDom.documentElement.selectNodes("employee/name");
    for (var i = 0; i < lstNodes.length; i++) {
     alert(lstNodes[i].firstChild.nodeValue);
    }

     Firefox:        

  var oEvaluator = new XPathEvaluator();
     var oResult = oEvaluator.evaluate("employee/name", oXmlDom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
     var oElement = oResult.iterateNext();
     while (oElement) {
      alert(oElement.firstChild.nodeValue);
      oElement = oResult.iterateNext();
     }

  (2)解决方法：比较好的方法给Firefox的Element添加selectNodes方法。      

 if (isFirefox) { // 需要浏览器检测
      Element.prototype.selectNodes = function(sXPath) {
      var oEvaluator = new XPathEvaluator();
       var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
       
       var aNodes = new Array();
       
       if (oResult != null) {
        var oElement = oResult.iterateNext();
        while (oElement) {
         aNodes.push(oElement);
         oElement = oResult.iterateNext();
        }
       }
       return aNodes;
      }
   }

   这样在IE和Firefox中就都可以调用selectNodes方法了。  

5. XSLT支持
  (1)现有问题：IE中可以使用XmlDOM的transferNode方法将其转换成html，而Firefox需要使用XSLTProcessor。
  IE:    

  oXmlDom.load("employee.xml");
    oXslDom.load("employee.xslt");
    var sResult=oXmlDom.transformNode(oXslDom);

    Firefox:     

  var oProcessor = new XSLTProcessor();
    oProcessor.importStylesheet(oXslDom);
    var oResultDom = oProcessor.transformToDocument(oXmlDom);    
    var oSerializer = new XMLSerializer();
    var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
    alert(sXml);

  (2)解决方法：比较好的方法给Firefox的Node添加transferNode方法。      

 if (isFirefox) { // 需要浏览器检测
     Node.prototype.transformNode = function(oXslDom) {
     var oProcessor = new XSLTProcessor();
      oProcessor.importStylesheet(oXslDom);
      var oResultDom = oProcessor.transformToDocument(oXmlDom);
      
      var oSerializer = new XMLSerializer();
      var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
      
      return sXml;
     }
    }

   这样在IE和Firefox中就都可以调用transferNode方法了。

以上就是针对浏览器兼容的JS写法的总结，希望对大家的学习有所帮助。