浏览器兼容的JS写法总结(2)

四、语法
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("<root><child/></root>")，而Firefox要使用DOMParser:
        var oParser = new DOMParser();
          var oXmlDom = oParser.parseFromString("<root/>", "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方法。