如何檢測如今主流的幾大瀏覽器？
在客戶端中，瀏覽器最重要的檢測對象是navigator對象，包括檢測瀏覽器的名稱，版本號和平臺等。html
一：檢測瀏覽器有哪些方式？web
目前主要有兩種方式：user-Agent字符串檢測法和對象/特徵檢測法。正則表達式
對象/特徵檢測法：主要是檢測瀏覽器具備哪些能力，而不是特定的瀏覽器的版本號，名稱。好比：判斷瀏覽器是否支持DOM，則可使用該檢測方法。
算法
if(document.getElementById)
{
alert("支持DOM")；
}
else
{
alert("不支持DOM");
}
注意：若是檢查函數是否存在，不能加入括號，由於若是加入括號，瀏覽器就會嘗試調用該函數，若是該函數不存在，則會出現錯誤。windows
好比下面的列子：瀏覽器
if(test)-----test爲函數名
{
console.log("111");
}
else
{
console.log("222");
}
user-Agent字符串檢測法：提供關於WEB瀏覽器的大量信息，包括版本號和名稱等，應用比較普遍，像在網站流量統計，網站中訪客使用的瀏覽器和操做系統等應用的比較多。安全
var suserAgent=navigator.userAgent; //我使用的是FIREFOX,輸出爲：Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0
var suserVersion=navigator.appVersion //輸出爲5.0
二：user-Agent（用戶代理）的格式app
navigator對象最先始於netScape Navigator 2.0和IE3.0；NetScape 引擎開發的代號爲Mozilla.函數
IE和NetScape的格式 測試
1.netScape Navigator 3.0
格式爲：Mozilla/AppVersion(platform,Secrity[;os-or-cpu-description])
好比win95在netScape Navigator 3.0 上運行後爲：Mozilla/3.0（win95;I）
I表示安全性較低，N表示沒有安全性，U表示強128位加密安全性。
2.IE3.0
格式爲：Mozilla/2.0(compatible,MSIE [IEversion];os)--compatible表示兼容的。
IE是3.0,然後面Mozilla/2.0有坑，形成user-Agent混淆
好比win95在IE3.02運行後爲：Mozilla/2.0（compatible;MSIE 3.0;windows 95）
//所以混淆帶來的影響是：檢測瀏覽器IE3.0和操做系統的算法變得更加繁瑣。
檢測IE變爲：
if(navigator.userAgent.indexOf('MSIE ')>-1)
{
//檢測爲3.0或更高版本
if(navigator.userAgent.indexOf('3.')>-1){alert("檢測IE3.0版本瀏覽器")}
}
else if(parseFloat(navigator.appVersion)>=3)
{
alert("檢測非IE3.0版本的瀏覽器")
}
//若是沒有混淆，只用一個算法，便能檢測3.0版本的瀏覽器
if(parseFloat(navigator.appVersion)>=3)
{
alert("檢測到全部爲3.0版本的瀏覽器")
}
所以若是Mozilla和IE的版本不對應，都要單獨檢測IE。其它的這裏都再也不講述了，你們知道就行。
3：如今基本二者都保持一致。
格式爲：Mozilla/MozillaVersion(platform,security,os-or-cpu;localization information;prereleaseVersion) Gecko/Geckoversion ApplicationProduct/ApplicationProductVersion
下面一一解釋各個的含義：
MozillaVersion--MozillaVersion的版本
platform-----------操做系統類型，包括WINdows,Mac,Unix
security-----------可爲I N U
os-or-cpu---------windows系統下：winNT/win95 ;Mac系統下：表明cpu類型，爲68k/ppc ;Unix系統下：從uname-sm中得到
localization information-------瀏覽器使用的語言，典型的爲美國的en-US
prereleaseVersion--------用於這個瀏覽器的開放源代碼的Mozilla代碼的基礎版本。
Geckoversion ----使用Gecko渲染引擎的版本，這裏按照yyyymmdd的日期
ApplicationProduct---------使用Mozilla代碼的品牌瀏覽器的名稱。
ApplicationProductVersion-----使用Mozilla代碼的品牌瀏覽器的名稱的版本。
好比：Mozilla/5.0 (Windows ；u;Windows NT 6.1; en-US;rv:46.0) Gecko/20100101 Firefox/46.0
Opera的格式
格式：Opera/AppVersion(os,security)[language]
好比：Opera/7.54(windows NT 5.1,u)[en]
Opera用一個獨特的user-Agent來表示肯定它的web瀏覽器,但正是由於它的獨特性，它能夠假裝成IE和Mozilla的某種版本。
所以這就形成了須要針對出現的不一樣版本，判斷屬於何種瀏覽器。
1.當opera假裝成Mozilla 5.0時，返回的user-Agent爲：
Mozilla/5.0 （windows NT 5.1;U）opera 7.54
2.當opera假裝成IE6.0時，返回的user-Agent爲：
Mozilla/4.0 （compatible;MSIE 6.0;windows NT 5.1）opera 7.54---出現了compatible，MSIE 至關於opera模擬了IE的字符串
Safari的格式
safari是apple本身推出的瀏覽器，基於Khtml的開源項目。
格式：Mozilla/5.0(platform,security,os-or-cpu;language) Applewebkit/ApplewebkitVersion(kHTML,like Gecko )safari/safariVersion
好比：Mozilla/5.0(MAC,U,PPC MAC os x;en) Applewebkit/124(kHTML,like Gecko )safari/125.1
---safari和Mozilla是兼容的
三：因爲瀏覽器，對應升級着不一樣的版本，所以最好的檢測方法就是檢測最小版本。
好比：
if(isIE5||isIE6||isIE7||isIE8)
{
//要作的事
}
//只須要直接檢測最小版本的便可
if(isMinIE5)
{
//要作的事
}
四：如何檢測Opera?
首先咱們封裝一個函數，一會後面要用到。主要是比較版本的值。
var suerAgent=navigator.userAgent;//保存user-Agent信息
var fAppVersion=navigator.appVersion; //保存版本號
function compareVersion(sVersion1,sVersion2) { //將版本拆分 var aVersion1=sVersion1.split('.'); var aVersion2=sVersion2.split('.'); //若是版本長度不一致，則在較短的版本後面補0 if(aVersion1.length>aVersion2.length) { for(var i=0;i<aVersion1.length-aVersion2.length;i++) { aVersion2.push('0'); } } else if(aVersion1.length<aVersion2.length) { for(var i=0;i<aVersion1.length-aVersion2.length;i++) { aVersion1.push('0'); } } //如今兩個不一樣版本的位數相等，比較版本各個位數的大小。 for(var i=0;i<aVersion1.length;i++) { var var1=parseInt(aVersion1[i],10); var var2=parseInt(aVersion2[i],10); if(var1<var2){return -1;}//前者小於後者 else if(var1>var2){return 1;}//前者大於後者 } return 0;//二者相等 } console.log(compareVersion("1.3.4","2.3")); console.log(compareVersion("1.13.2","1.3")); console.log(compareVersion("3.4","3.4"));
1.首先咱們分析一下，opera的user-Agent中每個都含有opera，所以最簡單的方法就是檢查是否含有字符opera。
var isOpera=suerAgent.indexOf("Opera")>-1;（獲得的爲bool值）
2.因爲opera含有不一樣的版本，這裏能夠聲明幾個變量，用來測試不一樣版本的opera
var isMinOpera4=isMinOpera5=isMinOpera6=isMinOpera7=false //每一個變量都設爲false，保證若是瀏覽器爲非Opera時，能正確返回false
3.因爲opera有假裝，因此有兩種方法來肯定瀏覽器的版本。
若是爲自身的user-Agent:
if(isOpera)
{
var selfOperaVersion=null;
if(navigator.appName=="Opera")
{
selfOperaVersion=fAppVersion;(fAppVersion爲保存的版本號)
}
}
若是使用了假裝的user-Agent:
//下面咱們來看一下，應該如何抽取？
var popOperaVersion=new RegExp("opera(\\d+\\.\\d+)");//注意這裏用的是new RegExp()的方法，須要對\d和\.進行雙重轉義。
因此綜上兩種狀況，咱們將代碼整理下以下：
if(isOpera)
{
var selfOperaVersion=null;
if(navigator.appName=="Opera")
{
selfOperaVersion=fAppVersion;(fAppVersion爲保存的版本號)
}
else
{
var popOperaVersion=new RegExp("opera(\\d+\\.\\d+)");
popOperaVersion.test(suerAgent);
selfOperaVersion=parseFloat(RegExp["$1"]);//版本號存儲在RegExp["$1"]中
}
//檢測一下分別是什麼版本的opera
console.log((isMinOpera4=selfOperaVersion)>=4);
console.log((isMinOpera5=selfOperaVersion)>=5);
}
五：如何檢測safari?
首先了解到Konqueror和safari都是基於KHTML，那麼咱們查看一下它的user-Agent字符：
Mozilla/5.0(compatible;konqueror/2.2.2;sunos)
Mozilla/5.0(compatible;konqueror/3.2;freeBSD)(KHTML,like Gecko)
Mozilla/5.0(Mac;u;ppc mac os x;en)Applewebkit/51(like Gecko) safari/51
暫列出上面三種典型的user-Agent,那麼能夠分析到safari中須要查找konqueror，Applewebkit，KHTML中的字符
檢測代碼以下,這裏再也不詳細講述，同opera的相似：
var isKHTML = suerAgent.indexOf("KHTML")>-1||suerAgent.indexOf("konqueror")>-1||suerAgent.indexOf("Applewebkit")>-1;
var isMinSafari1=isMinSafari2=false;
var isKonq2_2=isKonq3=isKonq3_1=isKonq3_2=false;
if(isKHTML)
{
//判斷使用的是何種KHTML？只有兩種，一種是safari，一種是konqueror
isSafari=suerAgent.indexOf('Applewebkit')>-1;
isKonq=suerAgent.indexOf('Applewebkit')>-1;
if(isSafari)
{
//設置正則表達式
var popAppWebkit=new RegExp("Applewebkit\\/(\\d+(?:\\.\\d*)?)");//版本能夠有小數，但不全是
popAppWebkit.test(suerAgent);
var selfAPPVersion=parseFloat(RegExp["$1"]);
console.log((isMinSafari1=selfAPPVersion)>=85);
console.log((isMinSafari1=selfAPPVersion)>=124);
}
else if(isKonq)
{
//設置正則表達式
var popAppWebkit=new RegExp("konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)");
popAppWebkit.test(suerAgent);
console.log((isKonq2_2=compareVersion(RegExp["$1"],"2.2"))>=0);
console.log((isKonq3=compareVersion(RegExp["$1"],"3.0"))>=0);
console.log((isKonq3_1=compareVersion(RegExp["$1"],"3.1"))>=0);
console.log((isKonq3_2=compareVersion(RegExp["$1"],"3.2"))>=0);
}
}
六：如何檢測IE？
先看一下IE的user-Agent的格式：Mozilla/4.0(compatible;MSIE 6.0;windows NT)
那麼主要檢測compatible和MSIE 這兩個字符便可。
代碼以下：
var isIE=suserAgent.indexOf("compatible")>-1&&suserAgent.indexOf("MSIE ")>-1&&!isOpera;
var isMinIE4=isMinIE5=isMinIE5_5=isMinIE6=false;
if(isIE)
{
var reIE=new RegExp("MSIE(\\d+\\.\\d+)");
reIE.test(suerAgent);
var selfAPPVersion=parseInt(RegExp["$1"]);
console.log((isMinIE4=selfAPPVersion)>=4);
console.log((isMinIE5=selfAPPVersion)>=4);
console.log((isMinIE5_5=selfAPPVersion)>=4);
}
七：如何檢測Mozilla?
先來看下格式：Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0，注意要考慮opera的假裝以及Safari中出現的like Gecko。
代碼以下：
var isMozilla=suerAgent.indexOf("Gecko")>-1&&!isKHTML;
var isMinMoz1=isMinMoz1_4=isMinMoz1_5=false;
if(isMozilla)
{
var reMozilla=new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
reMozilla.test(suerAgent);
var selfAPPVersion=parseFloat(RegExp["$1"]);
console.log((isMinMoz1=compareVersion(RegExp["$1"]),"1.0")>=0);
console.log((isMinMoz1_4=compareVersion(RegExp["$1"]),"1.4")>=0);
console.log((isMinMoz1_5=compareVersion(RegExp["$1"]),"1.5")>=0);
}
到此以上，全部的瀏覽器的檢測均已完成。
- 1. 瀏覽器檢測JS代碼(兼容目前各大主流瀏覽器)
- 2. 測試瀏覽器 如何的 地址
- 3. 如何檢測您的瀏覽器是否支持HTML5視頻
- 4. Vue 如何檢測瀏覽器窗口的變化
- 5. 如何揪出修改瀏覽器主頁的流氓軟件
- 6. 瀏覽器檢測
- 7. 如何取得一個瀏覽器瀏覽區域的大小
- 8. 如何：在 ASP.NET 網頁中檢測瀏覽器類型
- 9. JavaScript的瀏覽器檢測
- 10. 五大主流瀏覽器概況
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • 如何僞造ARP響應？ - TCP/IP教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 瀏覽器檢測JS代碼(兼容目前各大主流瀏覽器)
- 2. 測試瀏覽器 如何的 地址
- 3. 如何檢測您的瀏覽器是否支持HTML5視頻
- 4. Vue 如何檢測瀏覽器窗口的變化
- 5. 如何揪出修改瀏覽器主頁的流氓軟件
- 6. 瀏覽器檢測
- 7. 如何取得一個瀏覽器瀏覽區域的大小
- 8. 如何：在 ASP.NET 網頁中檢測瀏覽器類型
- 9. JavaScript的瀏覽器檢測
- 10. 五大主流瀏覽器概況