超详细超实用！！！网站开发页面适配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 = '<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">