随着公司用的人多了，使用的浏览器的种类也多了，浏览器兼容性这块就需要做起来了，之前调试一直用的chrome和360浏览器，所以引擎和这两款浏览器一样的其他浏览器兼容性上没啥大问题，但是对于火狐浏览器FireFox和欧朋浏览器Safari,特别是IE浏览器就需要做些额外的工作了。在额外工作之前首先需要检测浏览器的信息，下面是代码：
//获取浏览器相关信息
function allinfo() {
var appName = navigator.appName; //浏览器的正式名称
var appVersion = navigator.appVersion; //浏览器的版本号
var cookieEnabled = navigator.cookieEnabled; // 返回用户浏览器是否启用了cookie
var cpuClass = navigator.cpuClass; //返回用户计算机的cpu的型号，通常intel芯片返回"x86"（火狐没有）
var mimeType = navigator.mimeTypes; // 浏览器支持的所有MIME类型的数组
var platform = navigator.platform; // 浏览器正在运行的操作系统平台，包括Win16(windows3.x)
// Win32(windows98,Me,NT,2000,xp),Mac68K(Macintosh 680x0)
// 和ＭacPPC(Macintosh PowerPC)
var plugins = navigator.plugins; // 安装在浏览器上的所有插件的数组
var userLanguage = navigator.userLanguage; // 用户在自己的操作系统上设置的语言（火狐没有）
var userAgent = navigator.userAgent; //包含以下属性中所有或一部分的字符串：appCodeName,appName,appVersion,language,platform
var systemLanguage = navigator.systemLanguage; // 用户操作系统支持的默认语言（火狐没有）
if (isIe()) {
console.log("IE浏览器");
} else if (isFireFox()) {
console.log("火狐浏览器");
}else if(isChrome()){
console.log("谷歌浏览器");
}else if(isOpera()){
console.log('欧朋浏览器');
}
var appCodeName = navigator.appCodeName; //与浏览器相关的内部代码名
var appMinorVersion = navigator.appMinorVersion; //辅版本号（通常应用于浏览器的补丁或服务包)
var language = navigator.language; //浏览器支持的语言 （IE没有）
var onLine = navigator.onLine; //返回浏览器是否处于在线模式（IE4以上版本）
var opsProfile = navigator.opsProfile; // 未定义 （IE、火狐没有）
var oscpu = navigator.oscpu; //浏览器正在运行的操作系统，其中可能有CPU的信息（IE没有）
var product = navigator.product; // 浏览器的产品名（IE没有）
var productSub = navigator.productSub; //关于浏览器更多信息（IE没有）
var securityPolicy = navigator.securityPolicy; // 浏览器支持的加密类型（IE没有）
var userProfile = navigator.userProfile; // 返回一个UserProfile对象，它存储用户的个人信息（火狐没有）
var vender = navigator.vender; // 浏览器厂商名称（IE、火狐没有）
var vendorSub = navigator.vendorSub; // 关于浏览器厂商更多的信息
}
//判断是否IE
function isIe() {
var i = navigator.userAgent.toLowerCase().indexOf("msie");
var j=navigator.userAgent.toLowerCase().indexOf("trident");//判断IE11
return i >= 0||j>=0;
}
//判断是否firefox
function isFireFox() {
var i = navigator.userAgent.toLowerCase().indexOf("firefox");
return i >= 0;
}
function isChrome(){
var i = navigator.userAgent.toLowerCase().indexOf("chrome");
return i >= 0;
}
function isOpera(){
var i = navigator.userAgent.toLowerCase().indexOf("opera");
return i >= 0;
}
上面的代码中应该会注意到判断浏览器是不是IE浏览器的时候有两个判断，接下来我们来说下为啥IE的判断会这样.
我们通过console.log(navigator.userAgent)可以查看浏览器的信息，IE10及以下版本是这样的
5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)
而IE11是这样的：
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
对比两个useragent你会发现，IE11中没有MSIE字段，而之前判断浏览器是否IE的方法是判断字符中有没有MSIE字段，那么如歌判断IE11呢？我们可以通过判断有无Trident字段来判断，Trident字段是在IE9中引入的。所以判断IE浏览器的方法是这样的：
//判断是否IE
function isIe() {
var i = navigator.userAgent.toLowerCase().indexOf("msie");
var j=navigator.userAgent.toLowerCase().indexOf("trident");//判断IE11
return i >= 0||j>=0;
}
判断浏览器属性以及浏览器版本后，我们就可以根据浏览器的癖好来对我们的方法进行兼容性的补充完善啦。