[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支撑原生XMLRequestHttponreadystatechange运转
下面的代码中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);