PC端页面JS降级兼容到IE9

从现在IE浏览器使用占比来看，我们可以昂首阔步的抛弃它了～～～～，但是一句“最重要是大领导依然使用的是IE系列”，我们兼容就这么被迫拉低了～～～

需要考虑兼容的部分

1. ES6语法的兼容

主要解决ES6中Promise的使用。

引入polyfill.min.js

2. vue框架使用

工作中使用的模板嵌套方法导致，占位标签 不可以出现在VUE的实例区间中，如果一个vue实例中包含碎片，需要做两个vue实例

  <div class="hkAPP" id="hkAPPmap" ></div>

  <div class="text1">

      {pc:block pos="qz70n_qy_text"}{/pc}

  </div>

  <div id="topicOldPic"></div>

</body>

<script>

var bigMap= new Vue({

                el:"#hkAPPmap",

                data:{}

    });

var topicOld= new Vue({

                el:"#topicOldPic",

                data:{}

    });

</script>

虽然有ES6语法的兼容，但保险起见，尽量使用ES5语法

3. 插件的使用

1. swiper4.0 （包括vue-awesome-swiper）

加载classList.js，兼容swiper.min.js中的e.classList.add()等用法

因为IE9不兼容CSS3的效果，需要在js中，设置前后翻页的控制，下面代码以普通引入为例

var sVideo=new Swiper('#sVideo',{

          loop: true,

          slidesPerView: 4,

          speed:500,

          on:{

            init: function(){

                //启动swiper后，设定容器宽度

  this.$wrapperEl[0].style.width=270*this.slides.length+"px";

              //判断浏览器版本，如果是IE9，用style.left 的设置补充transform: translate3d(-1080px, 0px, 0px)的功能

                if(typeof  ieVersion && ieVersion && ieVersion==9){

                  this.$wrapperEl[0].style.left=-1080+"px";

                  this.$wrapperEl[0].style.position="relative";

                }

              },

            slideChange: function(){

                if(typeof  ieVersion && ieVersion && ieVersion==9){

                  this.$wrapperEl[0].style.left=-(270*this.activeIndex)+"px";

                }

            },

          }

      });

      $('.slide-prev').click(function(){

          sVideo.slidePrev();

      });

      $('.slide-next').click(function(){

          sVideo.slideNext();

      });

2. axios

a. 使用jsonp需在插件上加入下方代码

axios.jsonp = function(url,jsonpcallback) {

    if (!url) {

        console.error('Axios.JSONP 至少需要一个url参数!')

        return;

    }

    return new Promise(function(resolve, reject) {

        window.jsonCallBack = function(result) {

            resolve(result)

        }

        var JSONP = document.createElement("script");

        JSONP.type = "text/javascript";

        JSONP.src = url + '&callback=' +jsonpcallback;

        document.getElementsByTagName("head")[0].appendChild(JSONP);

        setTimeout(function() {

            document.getElementsByTagName("head")[0].removeChild(JSONP)

        }, 500)

    }

    )

}

b. get方法，可以获取数据，注意请求参数长度

post方法在IE10以下，这个插件完全无法使用，可以用以下方法替代

function getDataR (urlsrt){

    if (window.XDomainRequest) {//ie9及ie8使用XMLHttpRequest

          xhr = new XDomainRequest();

          xhr.onload = function () {

              // callback&callback(JSON.parse(xhr.responseText))

              return JSON.parse(xhr.responseText);

          }

          xhr.send();

          xhr.open("get",urlsrt);

          // xhr.open('post', 'http://haike.test.haiwainet.cn/hk-service-file/es/sns/queryFreshnews');

        //XMLHttpRequest的post时协议头不可更改，支持text和form表单两种，application/json不支持

        // xhr.send(JSON.stringify({

        //    "longitude": 98.5768,

        //    "latitude": 16.7047,

        //    "size": 10,

        //    "mediaId": 120,

        //    "days": 7

        //  }));

    } else {  //ie10及以上版本可以使用XMLHttpRequest

            xhr = new XMLHttpRequest();

            // 前端设置是否带cookie

            xhr.withCredentials = false;

            xhr.open('get', urlsrt, true);

            // xhr.open('post', 'http://haike.test.haiwainet.cn/hk-service-file/es/sns/queryFreshnews', true);

            //post时注意与后端协议头的统一设置

            // xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

            // xhr.send(JSON.stringify({

            //    "longitude": 98.5768,

            //    "latitude": 16.7047,

            //    "size": 10,

            //    "mediaId": 120,

            //    "days": 7

            //  }));

            xhr.send();

            xhr.onreadystatechange = function () {

              if (xhr.readyState == 4 && xhr.status == 200) {

                  alert(JSON.parse(xhr.responseText));

                  // callback&callback(JSON.parse(xhr.responseText));

              }

            };

      }

}