兼容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);