云风网
云风笔记
云风知识库
开发网站偶尔会遇到需要兼容ie的需求，这里以360浏览器为例，360浏览器是基于Chrome和IE双核浏览器，在极速模式下是跟谷歌浏览器内核一致的，兼容模式下的内核是IE内核。这里尤其是360兼容模式下，配置兼容IE细节尤其多。
一、console调试无效
Chrome 一直以来都是支持console,但IE不是，IE是后期版本支持的。而且有时可能会出现在调试模式是console可以使用，而用户模式下又有问题。这是因为，IE下的console 是为了调试而用的，默认非调试模式不存在 console。
因此建议，在使用console时，可以先进行存在判断。
f(window.console){console.log('XXXXXX');
}
或者采用alert进行调试
二、判断区分浏览器
linkChrome(obj) {//判断是否为chrome浏览器let vm = thislet agent = navigator.userAgent.toLowerCase()//获取浏览器信息摘要并字符串统一转化为小写console.log(agent)!function () {if (agent.indexOf('qqbrowser') >= 0) {//QQreturn vm.chrome = false;}if (agent.indexOf("se 2.x") >= 0) {//搜狗return vm.chrome = false;}if (agent.indexOf("edge") >= 0) {//edgereturn vm.chrome = false;}if (agent.indexOf('firefox') >= 0) {//火狐return vm.chrome = false;}if (agent.indexOf('bidubrowser') >= 0) {//百度return vm.chrome = false;}if (agent.indexOf('lbbrowser') >= 0) {//猎豹return vm.chrome = false;}if (agent.indexOf('maxthon') >= 0) {//遨游return vm.chrome = false;}if (agent.indexOf('trident') >= 0) {//IE核return vm.chrome = false;}if (agent.indexOf("safari") >= 0 && agent.indexOf("chrome") === -1) {//safarireturn vm.chrome = false;}let is360 = _mime("type", "application/vnd.chromium.remoting-viewer");//360if (is360) {return vm.chrome = false;}function _mime(option, value) {//检测是否为360极速浏览器和360安全浏览器let mimeTypes = navigator.mimeTypes;// console.log(mimeTypes)for (let mt in mimeTypes) {if (mimeTypes[mt][option] === value) {return true}}return vm.chrome = false;}vm.chrome = true;}.call()
}
三、第三方js引用
比如引入jquery 1.x进行ie8兼容开发，但是在页面调试的时候出了个bug,在IE8上面一直报错$未定义，或者jQuery未定义，导致页面上面写的jQuery全部失效，在Chrome浏览器没有任何问题
原因是
<script type="application/javascript" src="../js/jquery-1.10.1.min.js"></script>
这里在ie中需要改写为
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
四、轮播原生js处理
/*兼容Object.assign*/
if (typeof Object.assign != 'function') {Object.assign = function (target) {'use strict';if (target == null) {throw new TypeError('Cannot convert undefined or null to object');}target = Object(target);for (var index = 1; index < arguments.length; index++) {var source = arguments[index];if (source != null) {for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}}return target;};
}
/*兼容bind*/
(function () {if (!Function.prototype.bind) {Function.prototype.bind = function (oThis) {if (typeof this !== "function") {throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");}var aArgs = Array.prototype.slice.call(arguments, 1),fToBind = this,fNOP = function () { },fBound = function () {return fToBind.apply(this instanceof fNOP && oThis? this: oThis,aArgs.concat(Array.prototype.slice.call(arguments)));};fNOP.prototype = this.prototype;fBound.prototype = new fNOP();return fBound;};}
}());
function BannerSlide(option) {this._init(option);
}
BannerSlide.prototype = {_init: function (option) {/*防止低版本浏览器window.console报错*/this.compatibleConsole();/*检查必须数据是否传入并且数据格式正确*/this.isThisAttr(option);/*将数据绑到实例上*/this.container = option.container; /*容器*/this.imagesSrc = option.imagesSrc; /*图片路径*/this.switchEffect = Object.assign({},{ /*切换效果*/slide: true, /*默认轮播*/arrow: true, /*默认箭头*/radius: true /*默认圆点*/},option.switchEffect);this.speed = option.speed ? option.speed : 3000; /*轮播速度*//*加载html布局*/this.bannerHtmlLoad();/*绑定事件*/this.bindEvent();},/*检查必须数据是否传入并且数据格式正确*/isThisAttr: function (option) {var msg = !option && '未传入配置对象(new BannerSlide()未传入对象)' || (!option.container || option.container.constructor !== String) && '无目标容器(container属性字符串值未传入)' || (!option.imagesSrc || option.imagesSrc.constructor !== Array) && '无图片路径(imagesSrc属性数组值未传入)' || null;if (msg) {throw new TypeError(msg + '————BannerSlide.js');}},/*防止低版本浏览器window.console报错*/compatibleConsole: function () {window.console = window.console || (function () {var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile= c.clear = c.exception = c.trace = c.assert = function () { };return c;})();},/*加载html布局*/bannerHtmlLoad: function () {var str = '<div class="bannerSlide-container" id="bannerSlide-container">\<div class="bs-images">';for (var i = 0 in this.imagesSrc) {str += '<img ' + (i == 0 ? "class=' checked'" : "") + ' src="' + this.imagesSrc[i] + '" alt="">';if(i==0){str += '<div ' + (i == 0 ? "class='bannerText bannerActive'" : "class='bannerText'") + '>\<div class="tagGroup flex-col justify-between" style="width: 13rem;color: #fff;">\<span class="tagTitle">产品及服务</span>\<span class="tagMain">\服务以万物感知、万物互联、万物智能、万物智联为目标，打造边缘端的智能硬件产品、连接层的网络连接服务\<br />\以及平台层的软件产品，形成一体化的AIOT产品及服务矩阵，共创智能物联新生态。\</span>\<div class="morePro flex-col sloganBtn">\<a class="toPro" href="html/proService.html">更多产品</a>\</div>\</div>\</div>';}else if(i==1){str += '<div class="bannerText">\<div class="tagGroup flex-col justify-between" style="width: 16rem;color: #fff;">\<span class="tagTitle">云-边-网-端<br/>一体化AIOT协同解决方案</span>\<span class="tagMain">\以智化云端AI服务、 赋能边缘感知设备、优化网络连接方案、聚合计算能力原则，聚焦电力行业、建筑行业、新能源行业，提供可信、快捷、智能、安全的“云-边-网-端”一站式综合解决方案\</span>\<div class="morePro flex-col sloganBtn">\<a class="toPro" href="html/solution.html">更多方案</a>\</div>\</div>\</div>';}else if(i==2){str += '<div class="bannerText">\<div class="tagGroup flex-col justify-between" style="width: 14rem;color: #000;">\<span class="tagTitle">全方位专业的服务支持</span>\<span class="tagMain">\从多角度、多方面为每个客户带来持续而有效的售后服务及技术支持\</span>\<div class="morePro flex-col sloganBtn">\<a class="toPro" href="html/support.html">了解更多</a>\</div>\</div>\</div>';}else if(i==3){str += '<div class="bannerText">\<div class="tagGroup flex-col justify-between" style="width: 16.5rem;color: #000;">\<span class="tagTitle">xxx科技有限公司</span>\<span class="tagMain">\xxx科技有限公司以推动能源数字化建设，打造能源产业数字经济新优势为目标，致力于电力行业的新技术应用和能源互联网+的综合服务。\</span>\<div class="morePro flex-col sloganBtn">\<a class="toPro" href="html/about.html">了解更多</a>\</div>\</div>\</div>';}}str += '</div>';if (this.switchEffect.arrow) {str += '<div class="bs-scope">\<div class="left-btn"></div>\<div class="right-btn"></div>\</div>';}if (this.switchEffect.radius) {str += '<div class="bs-radius">';for (var i = 0 in this.imagesSrc) {str += '<span' + (i == 0 ? " class='checked'" : "") + '></span>';}}str += '</div>\</div>';document.querySelector(this.container).innerHTML = str;},/*绑定事件*/bindEvent: function () {this.doms = {},/*初始化显示index*/this.index = 1;/*dom数据绑定到实例*/this.doms = Object.assign({}, {MaxBox: document.getElementById('bannerSlide-container'),images: document.querySelectorAll('#bannerSlide-container .bs-images>img'),leftBtn: document.querySelector('#bannerSlide-container .bs-scope .left-btn'),rightBtn: document.querySelector('#bannerSlide-container .bs-scope .right-btn'),radiusBtn: document.querySelectorAll('#bannerSlide-container .bs-radius>span')}, this.doms);var _this = this;if (this.switchEffect.slide) {/*轮播定时器*/this.time = setInterval(function () {this.slideFun();}.bind(this), this.speed);}if (this.switchEffect.arrow) {/*左右箭头*/this.doms.leftBtn.onclick = function () {return this.clickIndex(-1);}.bind(_this);this.doms.rightBtn.onclick = function () {return this.clickIndex(1);}.bind(_this);}if (this.switchEffect.radius) {/*点击圆点*/for (var i = 0; i < this.doms.radiusBtn.length; i++) {this.doms.radiusBtn[i].onclick = function () {_this.index = 0;_this.clickIndex(_this.prevAllDom(this).length);}}}},/*定时器函数*/slideFun: function () {this.render();this.index++;},/*点击左右箭头调用函数*/clickIndex: function (num) {clearInterval(this.time);this.time = null;this.index += num;this.render();this.time = setInterval(function () {this.slideFun();}.bind(this), this.speed);},/*渲染显示及index判定*/render: function () {if (this.index > this.doms.images.length - 1) {this.index = 0;} else if (this.index < 0) {this.index = this.doms.images.length - 1;}var elements = document.getElementsByClassName('bannerText');for (var j = 0; j < this.doms.images.length; j++) {this.removeClass(this.doms.images[j], 'checked');elements[j].classList.remove('bannerActive');if (this.switchEffect.radius) {this.removeClass(this.doms.radiusBtn[j], 'checked');}}if (this.switchEffect.radius) {this.addClass(this.doms.radiusBtn[this.index], 'checked');}this.addClass(this.doms.images[this.index], 'checked');elements[this.index].classList.add('bannerActive');},addClass: function (ele, cls) {if (!this.hasClass(ele, cls)) {ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;}},removeClass: function (ele, cls) {if (this.hasClass(ele, cls)) {var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';while (newClass.indexOf(' ' + cls + ' ') >= 0) {newClass = newClass.replace(' ' + cls + ' ', ' ');}ele.className = newClass.replace(/^\s+|\s+$/g, '');}},hasClass: function (ele, cls) {cls = cls || '';if (cls.replace(/\s/g, '').length == 0) return false;return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');},prevAllDom: function (obj) {var pe = obj.parentElement;var cs = pe.children;var arr = [];for (var i = 0; i < cs.length; i++) {var csi = cs[i];if (csi == obj) {break;}arr.push(csi);}return arr;}
};
.bannerSlide-container {width: 100%;height: 100%;margin: 0 auto;position: relative;
}
.bannerSlide-container .bs-images {width: 100%;height: 100%;margin: 0 auto;position: relative;
}
.bannerSlide-container .bs-images > img {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);
}
.bannerSlide-container .bs-images > img.checked {opacity: 1;filter: alpha(opacity=100);
}
.bannerSlide-container .bs-scope {width: 100%;height: 100%;position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;
}
.bannerSlide-container .bs-scope .left-btn,
.bannerSlide-container .bs-scope .right-btn {width: 44px;height: 44px;overflow: hidden;position: absolute;left: 10px;top: 0;bottom: 0;margin: auto;background: url(../images/left.png) center no-repeat;background-size: 44px;cursor: pointer;
}
.bannerSlide-container .bs-scope .right-btn {left: auto;right: 10px;background-image: url(../images/right.png);
}
.bannerSlide-container .bs-radius {height: 10px;font-size: 0;text-align: center;position: absolute;bottom: 70px;left: 0;right: 0;margin: auto;
}
.bannerSlide-container .bs-radius span {display: inline-block;width: 30px;height: 3px;overflow: hidden;background-color: rgba(255,255,255,0.4);cursor: pointer;margin: 0 2px;
}
.bannerSlide-container .bs-radius span.checked {background-color: #ffffff;
}<div id="container"></div>
<script>var bannerSlide = new BannerSlide({container:'#container', /*容器 必须*/imagesSrc:['img/home/bgOne.png','img/home/bgTwo.png','img/home/bgTh.png','img/home/bgF.png'], /*图片路径 必须*/speed:3000, /*轮播切换速度 可选*/switchEffect:{ /*切换效果配置 可选*/slide:true, /*轮播*/arrow:false, /*箭头*/radius:true /*圆点*/}});
</script>
五、引入兼容js补丁插件html5shiv
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
html5shiv cdn
六、设置header
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
若页面需默认用极速核，增加标签：
<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：
<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：
<meta name="renderer" content="ie-stand">
