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