兼容IE跨平臺(tái)解決方案

warmcheng 發(fā)布于2019-08-21 11:23 / 2374人閱讀

摘要：兼容跨平臺(tái)解決方案目前對(duì)于的支持，是比較完善的，很多開發(fā)平臺(tái)也借助于內(nèi)核，所以使用開發(fā)是一個(gè)很不錯(cuò)的選中。當(dāng)異步請求時(shí)，的這個(gè)值是至關(guān)重要的，它表示請求響應(yīng)過程的當(dāng)前活動(dòng)階段。狀態(tài)為時(shí)，為成功的標(biāo)志。

[TOC]

兼容IE跨平臺(tái)解決方案

目前對(duì)于es5的支持，chrome是比較完善的，很多開發(fā)平臺(tái)也借助于webkit內(nèi)核，所以使用chrome開發(fā)是一個(gè)很不錯(cuò)的選中。但是ie8-多個(gè)版本的兼容性也是讓無數(shù)程序員頭疼的事，那么下面會(huì)針對(duì)幾種比較典型的兼容做下總結(jié)，該總結(jié)多數(shù)參考js高級(jí)編程內(nèi)部源碼和自身遇到的一些兼容問題，剛開始撰寫此類博客，希望大家多多指出問題。

事件兼容

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
XMLRequestHttp兼容

XMLRequestHttp各個(gè)瀏覽器支持情況
IE7+,Firefox,Opera,Chrome和Safari支持原生XMLRequestHttp

onreadystatechange運(yùn)行
下面的代碼中onreadystatechange中會(huì)直接使用XHR，這樣的處理方式是DOM0級(jí)方法為XHR對(duì)象添加了事件處理程序，原因是并不是所有的瀏覽器都輝支持DOM2級(jí)方法，所以有的瀏覽器內(nèi)部處理此事件時(shí)，可能不會(huì)向其傳遞event事件對(duì)象，那么為了所有平臺(tái)都兼容，最好的處理方式就是使用XHR對(duì)象本身來確定下一步應(yīng)該會(huì)怎么做。注意：此方法建議在open之前調(diào)用

readyState幾種狀態(tài)的講解
對(duì)于XHR請求，絕大多數(shù)情況下都會(huì)使用異步請求。 當(dāng)異步請求時(shí)，readyState的這個(gè)值是至關(guān)重要的，它表示請求響應(yīng)過程的當(dāng)前活動(dòng)階段。0:未初始化，尚未調(diào)用open方法；1:啟動(dòng)，已經(jīng)調(diào)用open方法，但未調(diào)用send方法；2:發(fā)送 已經(jīng)調(diào)用send方法，但尚未接到服務(wù)端相應(yīng)； 3:接收，但是只接收了部分響應(yīng)；4:完成，已經(jīng)接收了全部響應(yīng)數(shù)據(jù)，二期已經(jīng)可以在客戶端使用了

state幾種狀態(tài)值的講解
在接收響應(yīng)后，我們認(rèn)為是readyState數(shù)值為4時(shí)為最佳判斷state時(shí)機(jī)。這時(shí)不得不普及一下HTTP響應(yīng)值state的意義。狀態(tài)為200時(shí)，為成功的標(biāo)志。此時(shí)responseText的內(nèi)容已經(jīng)準(zhǔn)備就緒，而且在內(nèi)容類型正確的情況下，responseXML也應(yīng)該能夠訪問了。如果狀態(tài)代碼304標(biāo)識(shí)請求的資源并沒有被修改，可以直接使用瀏覽器的緩存版本。

open方法的講解
接受3個(gè)參數(shù)，第一個(gè)是請求類型get或者post；第二個(gè)是url；第三個(gè)表示是否異步。另外需要說明兩點(diǎn)：意識(shí)URL相對(duì)于執(zhí)行代碼的當(dāng)前頁面（可以使用絕對(duì)路徑）；而是open方法并不會(huì)真正發(fā)送請求。

send方法的講解
send方法只接受一個(gè)參數(shù)，作為請求主體發(fā)送的數(shù)據(jù)，如果不需要通過請求主體（即post），則必須傳入null，這個(gè)參數(shù)對(duì)于瀏覽器是必須的。調(diào)用send后，請求會(huì)發(fā)送到服務(wù)器上進(jìn)行處理。


    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= 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);