从现在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));
}
};
}
}
网友评论