兼容IE跨平台解决方案

兼容IE跨平台解决方案

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

---

普通兼容问题

属性描述	IE	Chrome
select的options	options(index)	options[index]
孩子元素	childNodes	children
第一个孩子元素	firstChild	firstElementChild
最后一个孩子元素	lastChild	lastElementChild
ActiveXObject做ajax请求返回的驼峰属性写法可能没有值	responsetext,readystate	responseText,readyState
函数声明	function String.prototype.trim(){}	String.prototype.trim = function(){}

showModalDialog与dialogArgments兼容

简单写一些解决方式，后期会继续跟进

//触发showModalDialog方法的父窗口代码
(function(){
    window.showModalDialog = function(strUrl,args,styleStr){
            window.open(strUrl,"弹出窗口","height=600px","width=500px","top=100px","resizable=yes");
            window.dialogArguments = args;
        }
})();
//子窗口代码
(function(){
      if(window.opener){
           window.dialogArguments = window.opener.dialogArguments;
       }
})();

事件兼容

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;
           },
           getClipboardText:function(event){
             var clipboardData = (event.clipboardData || window.clipboardData);
             return clipboardData.getData("text") ;
           },
           setClipboardText:function(event,value){
              if(event.clipboardData){
                  return event.clipboardData.setData("text/plain",value);
              }else if(window.clipboardData){
                  return window.clipboardData.setData("text",value);
              }
           },
           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 Object){
                  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);

选择部分文本

主要解决IE的兼容选择部分文本

window.ct = {};
(function(NS){
    var selectText = function(textbox, startIndex, stopIndex){
        if(textbox.setSelectionRange){
            textbox.setSelectionRange(startIndex, stopIndex);
        }else if(textbox.createTextRange){
            var range = textbox.createTextRange();
            range.collapse(true);
            range.moveStart("character",startIndex);
            range.moveEnd("character",stopIndex - startIndex);
            range.select();
        }
        textbox.focus();
    }
    NS.SelectRangeUtil = {
       selectText:function(textbox, startIndex, stopIndex){
           return selectText(textbox, startIndex, stopIndex); 
       } 
    }
})(window.ct);
//测试代码
(function(NS){
   var selectText = NS.SelectRangeUtil.selectText;
   var textbox = document.createElement("input");
   textbox.type = "text";
   textbox.value = "Hello world";
   document.body.appendChild(textbox);
   //选择所有文本
   selectText(textbox,0,textbox.value.length);

   //选择前2个字符
   selectText(textbox,0,2);

   //选择4到第6个字符
   selectText(textbox,4,7); 
})(window.ct);