兼容IE跨平台解决方案

[TOC]

兼容IE跨平台解决方案

目前对于es5的支持，chrome是比较完善的，很多开发平台也借助于webkit内核，所以使用chrome开发是一个很不错的选中。但是ie8-多个版本的兼容性也是让无数程序员头疼的事，那么下面会针对几种比较典型的兼容做下总结，该总结多数参考js高级编程内部源码和自身遇到的一些兼容问题，刚开始撰写此类博客，希望大家多多指出问题。

---

事件兼容

code如下

   window.ct = {};
   (function(NS){
       var EventUtil = {
           addHandler:function(element, type, handler){
              if(element.addEventListener){
                 element.addEventListener(type,handler,false);//Chrome支持
              } else if(element.attachEvent){
                 element.attacheEvent("on" + type, handler);//IE9+支持
              }else{
                 element["on" + type] = handler;//IE8-支持
              }
           },
           removeHandler:function(element, type, handler){
              if(element.removeEventListener){
                 element.removeEventListener(type, handler, false);//Chrome支持
              }else if(element.detachEvent){
                 element.detachEvent("on" + type, handler);//IE9+支持
              }else{
                 element["on" + type] = null;//IE8-支持
              }
           },
           getEvent:function(event){
             return event ? event : window.event;
           },
           getTarget:function(event){
             return event.target || event.srcElement;
           },
           preventDefault:function(event){
             if(event.preventDefault){
                event.preventDefault();
             }else{
                event.returnValue = false;
             }
           },
           stopPropagation:function(event){
              if(event.stopPropagation){
                 event.stopPropagation();
              }else{
                 event.cancelBubble = true;
              }
           }
       }
       NS.EventUtil = EventUtil;
   })(window.ct);  

---

XPath兼容

   window.ct = {};
   (function(NS){
       var createDocument = function(){
          if(typeof arguments.callee.activeXArg != "string"){
              var versions = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument"],
                  i, len;
              for(i=0, len=versions.length; i< len; i++){
                  try{
                     new ActiveXObject(versions[i]);
                     arguments.callee.activeXArg = versions[i];
                     break;                  
                  }catch(e){
                     //step
                  }
              }
          }
          return new ActiveXObject(arguments.callee.ActiveXArg);
       }

       var parseXml = function(xml){
          var xmldom = null;
          if(typeof DOMParser != "undefined"){
              xmldom = (new DOMParser()).parseFromString(xml,"text/xml");
              var errors = xmldom.getElementsByTagName("parsererror");
              if(errors.length){
                 throw new Error("XML parsing error: " + error[0].textContent);
              }
          }else if(typeof ActiveXObject != "undefined"){
              xmldom = createDocument();
              xmldom.loadXML(xml);
              if(xmldom.parseError != 0){
                 throw new Error("XML parsing error: " + xmldom.parserError.reason);
              }
          }else{
              throw new Error("No XML parser avaiable");
          }
          return xmldom;
       }
       var serializeXml = function(xmldom){
          if(typeof XMLSerializer != "undefined"){
              return (new XMLSerializer()).serialToString(xmldom);
          }else if(typeof xmldom.xml != "undefined"){
              return xmldom.xml;
          }else{
              throw new Error("Could not serialize XML DOM.");
          }
       }

       var selectSingleNode = function(context, expression, namespaces){
           var doc = (context.nodeType != 9 ? context.ownerDocument : context);
           if(typeof doc.evaluate != "undefined"){
               var nsresolver = null;
               if(namespaces instanceof Objectt){
                  nsresolver = function(prefix){
                      return namespaces[prefix];
                  }
               }
               var result = doc.evaluate(expression, context, nsresolver, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
               return (result != null ? result.singleNodeValue : null);
           } 
       }

       var selectNodes = function(context, expression, namespaces){
           var doc = (context.nodeType != 9 ? context.ownerDocument : context);

           if(typeof doc.evaluate != "undefined"){
               var nsresolver = null;
               if(namespaces instanceof Object){
                    nsresolver = function(prefix){
                        return namespaces[prefix];
                    }
               }
               var result = doc.evaluate(expression, context, nsresolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
               var nodes = new Array();
               if(result != null){
                   for(var i=0,len=result.snapshotLength;i<len;i++){
                       nodes.push(result.snapshotItem(i));
                   }
               }
               return nodes;
           }else if(typeof context.selectNodes != "undefined"){
              //创建命名空间字符串
              if(namespaces instanceof Object){
                  var ns = "";
                  for(var prefix in namespaces){
                      if(namespaces.hasOwnProperty(prefix)){
                          ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' ";
                      }
                      doc.setProperty("SelectionNamespaces",ns);
                  }
                  var result = context.selectNodes(expression);
                  var nodes = new Array();
              
                  for(var i=0,len=result.length;i<len;i++){
                      nodes.push(result[i]);
                  }
                  return nodes;
              }else{
                  throw new Error("No XPath engine found");
              }
           }
       }
       NS.CustomXML = {
           parseXml: function(xml){
              return parseXml(xml); 
           },
           serializeXml: function(xmldom){
              return serializeXml(xmldom);
           },
           selectNodes: function(context, expression, namespaces){
              return selectNodes(context, expression, namespaces);
           } ,
           selectSingleNode: function(context, expression, namespaces){
              return selectSingleNode(context, expression, namespaces);
           }
       }
   })(window.ct);

XMLRequestHttp兼容

• XMLRequestHttp各个浏览器支持情况
  IE7+,Firefox,Opera,Chrome和Safari支持原生XMLRequestHttp

• onreadystatechange运行
  下面的代码中onreadystatechange中会直接使用XHR，这样的处理方式是DOM0级方法为XHR对象添加了事件处理程序，原因是并不是所有的浏览器都辉支持DOM2级方法，所以有的浏览器内部处理此事件时，可能不会向其传递event事件对象，那么为了所有平台都兼容，最好的处理方式就是使用XHR对象本身来确定下一步应该会怎么做。注意：此方法建议在open之前调用

• readyState几种状态的讲解
  对于XHR请求，绝大多数情况下都会使用异步请求。 当异步请求时，readyState的这个值是至关重要的，它表示请求响应过程的当前活动阶段。0:未初始化，尚未调用open方法；1:启动，已经调用open方法，但未调用send方法；2:发送 已经调用send方法，但尚未接到服务端相应； 3:接收，但是只接收了部分响应；4:完成，已经接收了全部响应数据，二期已经可以在客户端使用了

• state几种状态值的讲解
  在接收响应后，我们认为是readyState数值为4时为最佳判断state时机。这时不得不普及一下HTTP响应值state的意义。状态为200时，为成功的标志。此时responseText的内容已经准备就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。如果状态代码304标识请求的资源并没有被修改，可以直接使用浏览器的缓存版本。

• open方法的讲解
  接受3个参数，第一个是请求类型get或者post；第二个是url；第三个表示是否异步。另外需要说明两点：意识URL相对于执行代码的当前页面（可以使用绝对路径）；而是open方法并不会真正发送请求。

• send方法的讲解
  send方法只接受一个参数，作为请求主体发送的数据，如果不需要通过请求主体（即post），则必须传入null，这个参数对于浏览器是必须的。调用send后，请求会发送到服务器上进行处理。

    window.ct = {};
    (function(NS){
        var createXHR = function(){
            if(typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            }else if(typeof ActiveXObject != "undefined"){
                if(typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML.XMLHttp.6.0","MSXML.XMLHttp.3.0","MSXML.XMLHttp"],
                        i,len;
                    for(i=0,len=version.length;i<len;i++){
                        try{
                           new ActiveXObject(versions[i]);
                           arguments.callee.activeXString = versions[i];
                           break;
                        }catch(e){
                           //step
                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            }else{
                throw new Error("No XHR object available.");
            }  

            NS.XHRUtil = {
                createXHR:function(){
                    return createXHR();      
                }    
            }
        } 
    })(window.ct);
    //下面是测试代码
    (function(NS){
        var XHRUtil = NS.XHRUtil;
        var xhr = createXHR();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){//readyState 0:未初始化 1:启动，已经调用open方法，但未调用send方法 2:发送 已经调用send方法，但尚未接到服务端相应 3:接收，但是只接收了部分响应 4:完成，已经接收了全部响应数据，而且已经可以在客户端使用了
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                    console.info("successful responseText: " + xhr.responseText)
                }else{
                    console.error("Request was unsuccessful: " + xhr.status);
                }
            } 
        } 
        xhr.open("get","url",true);
        xhr.send(null);
    })(window.ct);