前言:
pc端的浏覽器衆多,有時候相容性不太一樣,那麼我們就需要判斷下浏覽器的類型來做相容性處理。
我特地下載下傳了常用的浏覽器來進行測試,注意這裡我并沒有測試各浏覽器的各個版本,隻是就目前下載下傳的版本來測試的。可能會存在低版本校驗不正确的情況,是以如果需要測試自行按照下面的方式進行測試判斷。
主要是判斷 navigator.userAgent 中每個浏覽器獨特存在的資訊字元。
下面進行測試的浏覽器有:
火狐浏覽器、谷歌浏覽器、360浏覽器、Opera浏覽器、Edge、QQ浏覽器、UC浏覽器、safari浏覽器、IE11、IE7~IE10
// 火狐浏覽器:
// Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
// 谷歌浏覽器
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
// 360極速浏覽器:
// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
// 360安全浏覽器:
// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
// Edge浏覽器:
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18363
// Opera浏覽器:
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36 OPR/68.0.3618.63
// QQ浏覽器:
// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3756.400 QQBrowser/10.5.4039.400
// safari浏覽器
// Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
// UC浏覽器:
// Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 UBrowser/6.2.4098.3 Safari/537.36
// IE11:
// Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
// IE10:
// Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
// IE9:
// Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
// IE8:
// Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
// IE7及其以下:
// Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
function myBrowser() {
var userAgent = navigator.userAgent; //取得浏覽器的userAgent字元串
console.log(userAgent)
var isOpera = userAgent.indexOf("Opera") > -1
|| userAgent.indexOf("OPR") > -1; //判斷是否Opera浏覽器
var isQQ = userAgent.indexOf("QQBrowser") > -1; //判斷是否QQBrowser浏覽器
var isUC = userAgent.indexOf("UBrowser") > -1; //判斷是否UC浏覽器
var isIE = userAgent.indexOf("compatible") > -1
&& userAgent.indexOf("MSIE") > -1; //判斷是否IE7~IE10浏覽器
var isIE11 = userAgent.indexOf("compatible") === -1
&& userAgent.indexOf("Trident") > -1; //判斷是否IE11浏覽器
var isEdge = userAgent.indexOf("Edge") > -1; //判斷是否IE的Edge浏覽器
var isFF = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox浏覽器
var isSafari = userAgent.indexOf("Safari") > -1
&& userAgent.indexOf("Chrome") === -1; //判斷是否Safari浏覽器
var isChrome = userAgent.indexOf("Chrome") > -1
&& userAgent.indexOf("; Win") > -1
&& userAgent.indexOf("Safari") > -1; //判斷Chrome浏覽器
var is360 = userAgent.indexOf("Chrome") > -1
&& userAgent.indexOf("; WOW") > -1
&& userAgent.indexOf("Safari") > -1; //判斷360浏覽器
if (isIE) {
var reIE = /MSIE (\d+)\.\d+;/;
// match() 傳回一個數組。數組第一項是比對到的所有文本;數組第二項是正則中小括号比對到的文本
var matchReg = userAgent.match(reIE)
var fIEVersion = matchReg[1];
if (fIEVersion == 7) {
return "IE7及其以下";
} else if (fIEVersion == 8) {
return "IE8";
} else if (fIEVersion == 9) {
return "IE9";
} else if (fIEVersion == 10) {
return "IE10";
} else {
return "0";
}//IE版本過低
return "IE";
}
if (isUC) {
return "UC";
}
if (isQQ) {
return "QQBrowser";
}
if (isIE11) {
return "IE11";
}
if (isOpera) {
return "Opera";
}
if (isEdge) {
return "Edge";
}
if (isFF) {
return "Firefox";
}
if (isSafari) {
return "Safari";
}
if (isChrome) {
return "Chrome";
}
if (is360) {
return "360";
}
}
alert(myBrowser())
參考連結:
https://www.jianshu.com/p/f897aab7ce95