首先，咱们需要知道不同浏览器有不同的特征，这些特征可以通过 navigator.userAgent 这个属性来获取。这个属性包含了浏览器的版本、操作系统等信息，通过解析这个信息，我们可以识别出大多数主流浏览器。
IE浏览器在用户代理字符串中包含了 "MSIE" 或 "Trident"。咱们可以用以下代码来判断是否为IE浏览器：
function isIE() {
return /MSIE|Trident/.test(window.navigator.userAgent);
}
console.log(isIE()); // 如果是IE浏览器，这里会输出true
FireFox的用户代理字符串中包含了 "Firefox"。判断的方法如下：
function isFirefox() {
return /Firefox/.test(window.navigator.userAgent);
}
console.log(isFirefox()); // 如果是FireFox浏览器，这里会输出true
Opera浏览器的用户代理字符串中包含了 "Opera" 或 "OPR"。判断的方法如下：
function isOpera() {
return /Opera|OPR/.test(window.navigator.userAgent);
}
console.log(isOpera()); // 如果是Opera浏览器，这里会输出true
Safari浏览器的用户代理字符串中包含了 "Safari" 且不包含 "Chrome"。判断的方法如下：
function isSafari() {
return /Safari/.test(window.navigator.userAgent) && !/Chrome/.test(window.navigator.userAgent);
}
console.log(isSafari()); // 如果是Safari浏览器，这里会输出true
Chrome浏览器的用户代理字符串中包含了 "Chrome" 且不包含 "OPR" 和 "Edge"。判断的方法如下：
function isChrome() {
return /Chrome/.test(window.navigator.userAgent) && !/OPR/.test(window.navigator.userAgent) && !/Edge/.test(window.navigator.userAgent);
}
console.log(isChrome()); // 如果是Chrome浏览器，这里会输出true
Edge浏览器的用户代理字符串中包含了 "Edge"。判断的方法如下：
function isEdge() {
return /Edg/.test(window.navigator.userAgent);
}
console.log(isEdge()); // 如果是Edge浏览器，这里会输出true
360浏览器就比较麻烦了，因为它既有兼容模式又有极速模式。而且它会模仿Chrome或者IE，所以单纯通过userAgent判断是不够的。我们需要结合特征检测的方法来判断。
通过特征检测，可以判断出360极速浏览器。在极速模式下，360浏览器会带有特定的插件信息：
function is360() {
let mimeTypes = window.navigator.mimeTypes;
for (let mt in mimeTypes) {
if (mimeTypes[mt].type === "application/360softmgrplugin") {
return true;
}
}
return false;
}
console.log(is360()); // 360极速浏览器返回true，其他浏览器返回false
360安全浏览器在兼容模式下会伪装成IE，可以通过特定的ActiveX控件来判断：
function is360SE() {
try {
let ax = new ActiveXObject('Xunlei.XLWEBSAFE.1');
return true;
} catch (e) {
return false;
}
}
console.log(is360SE()); // 360安全浏览器返回true，其他浏览器返回false
虎哥给大家汇总一个最终的方法，通过判断不同的浏览器特征，直接返回当前浏览器的名称。代码如下：
function is360() {
let mimeTypes = window.navigator.mimeTypes;
for (let mt in mimeTypes) {
if (mimeTypes[mt].type === "application/360softmgrplugin") {
return true;
}
}
return false;
}
function is360SE() {
try {
let ax = new ActiveXObject('Xunlei.XLWEBSAFE.1');
return true;
} catch (e) {
return false;
}
}
function detectBrowser() {
var userAgent = window.navigator.userAgent;
if (/MSIE|Trident/.test(userAgent)) {
return "IE";
} else if (/Edg/.test(userAgent)) {
return "Edge";
} else if (/Firefox/.test(userAgent)) {
return "Firefox";
} else if (/Opera|OPR/.test(userAgent)) {
return "Opera";
} else if (/Safari/.test(userAgent) && !/Chrome/.test(userAgent) && !/Edg/.test(userAgent)) {
return "Safari";
} else if (/Chrome/.test(userAgent) && !/OPR/.test(userAgent) && !/Edg/.test(userAgent)) {
// Further check for 360 browsers
if (is360SE()) {
return "360安全浏览器";
} else if (is360()) {
return "360极速浏览器";
} else {
// Check for other 360 browsers based on specific mimeTypes
let mimeTypes = window.navigator.mimeTypes;
for (let i in mimeTypes) {
if (mimeTypes[i]['type'] === 'application/vnd.chromium.remoting-viewer') {
return "360浏览器";
}
}
return "Chrome";
}
} else {
return "Unknown";
}
}
console.log(detectBrowser()); // 输出当前使用的浏览器名称
只需要调用 detectBrowser() 方法，它会返回一个字符串，指示当前浏览器的名称。这样，咱们就能直接知道当前用户使用的浏览器了。
最后，特别提醒一下，JS判断浏览器的方法虽然有用，但尽量不要过分依赖，毕竟浏览器厂商的更新迭代非常快，兼容性问题还是要多多注意。
大佬们如果还有更牛的方法，记得也分享出来！希望今天的分享对大家有帮助，如果你有啥独特的经验分享，欢迎在评论区留言！
好文章