资讯专栏INFORMATION COLUMN

兼容IE跨平台解决方案

warmcheng / 2288人阅读

摘要:兼容跨平台解决方案目前对于的支持,是比较完善的,很多开发平台也借助于内核,所以使用开发是一个很不错的选中。当异步请求时,的这个值是至关重要的,它表示请求响应过程的当前活动阶段。状态为时,为成功的标志。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86641.html

相关文章

  • IE 兼容模式 设置 Meta Compatible 和 Iframe 子页面的关系

    摘要:也能使用更复杂的,更页面增加更强的效果。这是因为当顶级页面设置为或,里面的页面设置不起作用,它的文档模式显示的是。参考参考使用来搞定浏览器兼容模式强制标准模式标准模式与兼容模式设置背景 因为历史原因,之前很多的系统都会是 顶级页面+Iframe来加载子级页面的这种模式构件系统,而且系统都只能运行在IE6或者IE 高版本兼容模式下(IE 7模式)。 随着现在的审美原来越高,脚本能里越来越强,...

    番茄西红柿 评论0 收藏0
  • 浏览器和兼容问题

    一、浏览器内核 参考文章:浏览器引擎(内核)介绍 Rendering Engine,中文翻译过来名称很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核。 用来渲染网页内容的,将网页的内容和排版代码转换为可视的页面,一个浏览器可能不止有一个内核。 1、排版引擎 (1)Trident(Windows)360 IE(2)Gecko(跨平台)Mozilla Firefox、Mozilla SeaM...

    guqiu 评论0 收藏0
  • 浏览器和兼容问题

    一、浏览器内核 参考文章:浏览器引擎(内核)介绍 Rendering Engine,中文翻译过来名称很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核。 用来渲染网页内容的,将网页的内容和排版代码转换为可视的页面,一个浏览器可能不止有一个内核。 1、排版引擎 (1)Trident(Windows)360 IE(2)Gecko(跨平台)Mozilla Firefox、Mozilla SeaM...

    geekzhou 评论0 收藏0
  • 浏览器和兼容问题

    一、浏览器内核 参考文章:浏览器引擎(内核)介绍 Rendering Engine,中文翻译过来名称很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核。 用来渲染网页内容的,将网页的内容和排版代码转换为可视的页面,一个浏览器可能不止有一个内核。 1、排版引擎 (1)Trident(Windows)360 IE(2)Gecko(跨平台)Mozilla Firefox、Mozilla SeaM...

    EdwardUp 评论0 收藏0
  • Zepto 源码分析 2 - Polyfill 设计

    摘要:此模块包含的设计思路即为预以匹配降级方案。没有默认编译该模块,以及利用该模块判断后提供平台相关逻辑的主要原因在于其设计原则的代码完成核心的功能。此处,也引出了代码实现的另一个基本原则面向功能标准,先功能覆盖再优雅降级。 在进入 Zepto Core 模块代码之前,本节简略列举 Zepto 及其他开源库中一些 Polyfill 的设计思路与实现技巧。 涉及模块:IE/IOS 3/Dete...

    chuyao 评论0 收藏0

发表评论

0条评论

warmcheng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<