超详细超实用！！！网站开发页面适配360浏览器兼容模式
云风网
云风笔记
云风知识库
开发网站偶尔会遇到需要兼容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 = this
let agent = navigator.userAgent.toLowerCase()//获取浏览器信息摘要并字符串统一转化为小写
console.log(agent)
!function () {
if (agent.indexOf('qqbrowser') >= 0) {//QQ
return vm.chrome = false;
}
if (agent.indexOf("se 2.x") >= 0) {//搜狗
return vm.chrome = false;
}
if (agent.indexOf("edge") >= 0) {//edge
return 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) {//safari
return vm.chrome = false;
}
let is360 = _mime("type", "application/vnd.chromium.remoting-viewer");//360
if (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 = '\
';
for (var i = 0 in this.imagesSrc) {
str += '![]()
+ (i == 0 ? "class=' checked'" : "") + ' src="' + this.imagesSrc[i] + '" alt="">';
if(i==0){
str += ' + (i == 0 ? "class='bannerText bannerActive'" : "class='bannerText'") + '>\
\
产品及服务\
\
服务以万物感知、万物互联、万物智能、万物智联为目标，打造边缘端的智能硬件产品、连接层的网络连接服务\
\
以及平台层的软件产品，形成一体化的AIOT产品及服务矩阵，共创智能物联新生态。\
\
\
更多产品\
\
\
';
}else if(i==1){
str += '';
}else if(i==2){
str += '';
}else if(i==3){
str += '';
}
}
str += '';
if (this.switchEffect.arrow) {
str += '\
\
\
';
}
if (this.switchEffect.radius) {
str += '';
for (var i = 0 in this.imagesSrc) {
str += ' + (i == 0 ? " class='checked'" : "") + '>' ;
}
}
str += '\
';
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">