Ringkasan kaedah penulisan JS serasi pelayar_kemahiran javascript

1. Masalah carian elemen
1. dokumen.semua[nama]
(1)Masalah sedia ada: Firefox tidak menyokong document.all[name]
(2) Penyelesaian: Gunakan getElementsByName(nama), getElementById(id), dsb.

2. Masalah objek koleksi
(1) Masalah sedia ada: Anda boleh menggunakan () untuk mengakses banyak objek koleksi dalam IE, tetapi anda hanya boleh menggunakan [] dalam Firefox.
Contohnya: document.forms("formName") boleh digunakan dalam IE untuk mengembalikan Borang bernama "formName", tetapi ia tidak berfungsi dalam Firefox.
(2) Penyelesaian: Gunakan [], dalam contoh di atas ia boleh ditukar kepada document.forms["formName"]

3. ID elemen HTML kelihatan dalam JavaScript
(1) Masalah sedia ada: ID dalam elemen HTML dalam IE boleh digunakan secara langsung sebagai nama pembolehubah objek bawahan dokumen. Tidak mungkin dalam Firefox.
(2) Penyelesaian: Gunakan getElementById("idName") dan bukannya idName sebagai pembolehubah objek.

4. eval(idName) mendapat objek
(1) Masalah sedia ada: Dalam IE, anda boleh menggunakan eval(idName) untuk mendapatkan objek HTML dengan ID idName, tetapi tidak dalam Firefox.
(2) Penyelesaian: Gunakan getElementById(idName) dan bukannya eval(idName).

5. Nama pembolehubah adalah sama dengan ID objek HTML
(1) Masalah sedia ada: Dalam Firefox, kerana ID objek tidak digunakan sebagai nama objek HTML, anda boleh menggunakan nama pembolehubah yang sama seperti ID objek HTML, tetapi tidak dalam IE.
(2) Penyelesaian: Apabila mengisytiharkan pembolehubah, sentiasa tambah var untuk mengelakkan kekaburan, supaya ia juga boleh berjalan secara normal dalam IE. Di samping itu, adalah lebih baik untuk tidak mengambil nama pembolehubah yang sama seperti id objek HTML untuk mengurangkan ralat.

Nota: 3, 4 dan 5 semuanya tergolong dalam kategori soalan yang sama.

6. Bingkai
(1) Masalah sedia ada: Dalam IE, anda boleh menggunakan window.top.frameId dan window.top.frameName untuk mendapatkan Window diwakili oleh Frame Dalam Firefox, anda hanya boleh menggunakan window.top.frameName.
(2) Penyelesaian: Tetapkan Id dan Nama Bingkai agar sama, dan gunakan window.top.frameName untuk mengakses Bingkai.

2. Operasi DOM
1. Tetapkan kandungan teks elemen.
(1) Masalah sedia ada: IE menggunakan innerText, manakala Firefox menggunakan textContent untuk menetapkan kandungan teks unsur.
(2) Penyelesaian: Jika kandungan teks tidak mengandungi aksara khas seperti "7cd5b91af30fe2437a6260ab1429d7ed", anda boleh menggunakan innerHTML. Jika tidak, anda boleh menggunakan:
 

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

2. parentElement, ibu bapa.anak
(1) Masalah sedia ada: IE boleh menggunakan parentElement untuk mendapatkan nod induk, dan parent.children untuk mendapatkan semua nod anak nod. Tidak disokong oleh Firefox.
(2) Penyelesaian: Gunakan parentNode dan parent.childNodes.

3. Penjelasan childNodes.
(1) Masalah sedia ada: Tafsiran childNodes berbeza dalam IE dan Firefox tidak akan memasukkan nod teks kosong, tetapi Firefox akan.
(2) Penyelesaian: Gunakan childNodes untuk menapis nod teks, seperti berikut:

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

4. Penjelasan document.getElementsByName.
(1) Masalah sedia ada: getElementsByName dalam IE hanya akan menyemak elemen d5fd7aea971a85678ba271703566ebfd tetapi di bawah Firefox ia akan menyemak semua elemen.
(2) Penyelesaian: Jangan gunakan getElementsByName untuk menyemak elemen selain d5fd7aea971a85678ba271703566ebfd dan a1f02c36ba31691bcfe87b2722de723b. Jika anda ingin mendapatkan satu elemen, cuba gunakan getElementById.

5. Penjelasan document.getElementById.
(1) Masalah sedia ada: getElementById dalam IE bukan sahaja menyemak atribut Id, tetapi juga menyemak atribut Nama Apabila atribut Nama sepadan dengan parameter, elemen itu juga akan dikembalikan. Dalam Firefox hanya atribut Id disemak.
(2) Penyelesaian: Cuba kekalkan Id dan Nama yang sama, dan jangan jadikan atribut nama satu elemen sama dengan atribut id elemen lain.

3
1. Isu Event.x dan event.y (1) Masalah sedia ada: Dalam IE, objek acara mempunyai atribut x, y, tetapi tidak dalam Firefox.
(2) Penyelesaian: Dalam Firefox, setara dengan event.x ialah event.pageX. Boleh digunakan:
mX = event.x ? event.x : event.pageX;

2. tetingkap.acara

(1) Masalah sedia ada: Menggunakan window.event tidak boleh dijalankan pada Firefox

(2)Penyelesaian:
Kod asal (boleh dijalankan dalam IE):

Kod baharu (berfungsi dalam IE dan Firefox):

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

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写法的总结，希望对大家的学习有所帮助。