BOM之navigator對象和用戶代理檢測
前面的話
navigator對象現(xiàn)在已經(jīng)成為識別客戶端瀏覽器的事實標(biāo)準(zhǔn)，navigator對象是所有支持javascript的瀏覽器所共有的。本文將詳細(xì)介紹navigator對象和用戶代理檢測
屬性
與其他BOM對象的情況一樣，每個瀏覽器中的navigator對象也都有一套自己的屬性。下表列出了存在于所有瀏覽器中的屬性和方法，以及支持它們的瀏覽器版本
屬性 說明
appCodeName 瀏覽器名稱[所有瀏覽器都返回Mozilla]
userAgent 瀏覽器的用戶代理字符串
appVersion 瀏覽器版本
appMinorVersion 次版本信息[IE返回0，chrome和firefox不支持]
platform 瀏覽器所在的系統(tǒng)平臺[所有瀏覽器都返回Win32]
plugins 瀏覽器中安裝的插件信息的數(shù)組
mimeTypes 在瀏覽器中注冊的MIME類型數(shù)組
language 瀏覽器主語言[IE10-不支持，其他瀏覽器返回zh-CN]
systemLanguage 操作系統(tǒng)語言[IE返回zh-CN，chrome和firefox不支持]
userLanguage 操作系統(tǒng)默認(rèn)語言[IE返回zh-CN，chrome和firefox不支持]
product 產(chǎn)品名稱[IE10-不支持，其他瀏覽器返回Gecko]
productSub 產(chǎn)品次要信息[IE不支持，chrome返回20030107，firefox返回20100101]
vendor 瀏覽器品牌[chrome返回Google Inc.，IE和firefox不支持]
onLine 是否連接因特網(wǎng)[IE根據(jù)實際情況返回true或false，chrome和firefox始終返回true]
cookieEnabled 表示cookie是否啟用[所有瀏覽器都返回true]
javaEnabled 是否啟用java[IE8-瀏覽器返回{}，其他瀏覽器返回function javaEnabled()]
buildID 瀏覽器編譯版本[firefox返回20170125094131，chrome和IE不支持]
cpuClass 計算機使用的CPU類型[IE返回x86，chrome和firefox不支持]
oscpu 操作系統(tǒng)或使用的CPU[firefox返回Windows NT 10.0; WOW64，chrome和IE不支持]
檢測插件
檢測瀏覽器插件是一種最常見的檢測例程
對于非IE瀏覽器，可以使用plugins數(shù)組來達(dá)到這個目的該數(shù)組中的每一項都包含下列屬性
name:插件的名字
description:插件的描述
filename:插件的文件名
length:插件所處理的MIME類型數(shù)量
通過循環(huán)迭代每個插件并將插件的name與給定的名字進(jìn)行比較
function hasPlugin(name){
name = name.toLowerCase();
for(var i = 0; i < navigator.plugins.length; i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
}
//檢測flash
console.log(hasPlugin("Flash"));//true
對于IE瀏覽器，檢測插件的辦法是使用專有的ActiveXObject類型，并嘗試創(chuàng)建一個特定插件的實例。IE是使用COM對象來實現(xiàn)插件的，而COM對象使用唯一標(biāo)識符來標(biāo)識。因此，想檢查特定的插件就必須知道其COM標(biāo)識符。例如，F(xiàn)lash的標(biāo)識符是ShockwaveFlash.ShockwaveFlash
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
//檢測Flash
console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"))//true
【兼容寫法】
//檢測非IE中的插件
function hasPlugin(name){
name = name.toLowerCase();
for(var i = 0; i < navigator.plugins.length; i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
}
//檢測IE中的插件
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
function hasFlash(){
var result = hasPlugin("Flash");
if(!result){
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result;
}
console.log(hasFlash());//true
用戶代理檢測
navigator對象中最重要的作用就是使用useragent實現(xiàn)用戶代理檢測。用戶代理檢測是一種萬不得已的做法，優(yōu)先級排在前面介紹過的能力檢測之后
發(fā)展歷史
1、1993年美國NCSA國家超級計算機中心發(fā)布了世界上第一款web瀏覽器Mosaic，該瀏覽器的用戶代理字符串為Mosaic/0.9
2、Netscape公司進(jìn)入瀏覽器開發(fā)領(lǐng)域，將自己產(chǎn)品的代號定名了Mozilla(Mosaic Killer)的簡寫，用戶代理字符串格式為Mozilla/版本號 [語言] (平臺；加密類型)
3、IE贏得用戶廣泛認(rèn)可的web瀏覽器IE3發(fā)布時，Netscape已經(jīng)占據(jù)了絕對市場份額，為了讓服務(wù)器能夠檢測到IE，IE將用戶代理字符串修改成兼容Netscape的形式：Mozilla/2.0(compatible;MSIE版本號；操作系統(tǒng))
4、各瀏覽器陸續(xù)出現(xiàn)，用戶代理字符串的顯示格式也越來越類似……
HTTP規(guī)范明確規(guī)定，瀏覽器應(yīng)該發(fā)送簡短的用戶代理字符串，指明瀏覽器的名稱和版本號。但現(xiàn)實中卻沒有這么簡單，各瀏覽器的檢測結(jié)果如下所示
檢測結(jié)果
【IE3】
Mozilla/2.0 (compatible; MSIE3.02; windows 95)
【IE6】
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
【IE7】
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)
【IE8】
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)
【IE9】
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
【IE10】
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
【IE11】
Mozilla/5.0 (MSIE 9.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; .NET4.0C; .NET4.0E; InfoPath.3; GWX:QUALIFIED; rv:11.0) like Gecko
【chrome】
Mozilla/5.0 (Windows NT 6.1; WOW64)G AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
【safari】
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
【firefox】
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
【opera】
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25
【ipad】
Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
【iphone】
Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4
【android】
Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36
識別內(nèi)核
常見的內(nèi)核有Trident、Gecko和Webkit
[注意]因為Trident和Webkit的用戶代理字符串中可能會出現(xiàn)like Gecko的字眼，所以最后再測Gecko
function whichEngine(){
var ua = navigator.userAgent;
//Trident內(nèi)核
if(/Trident/.test(ua)){
return "Trident";
}
//Webkit內(nèi)核
if(/WebKit/.test(ua)){
return "WebKit";
}
//Gecko內(nèi)核
if(/Gecko/.test(ua)){
return "Gecko";
}
}
console.log(whichEngine());//IE11下顯示"Trident"
識別瀏覽器
【1】IE
IE3-IE10都可以通過MSIE的版本號來判斷，因為有的IE11并不出現(xiàn)MSIE字符，且safari中也有rv字段，所以IE11需要通過rv后的版本號和Trident來配合判斷
function isIE(){
var ua = navigator.userAgent;
//檢測Trident引擎，IE8+
if(/Trident/.test(ua)){
//IE11+
if(/rv:(\d+)/.test(ua)){
return RegExp["$1"];
}
//IE8-IE10
if(/MSIE (\d+)/.test(ua)){
return RegExp["$1"];
}
}
//檢測IE標(biāo)識，IE7-
if(/MSIE (\d+)/.test(ua)){
return RegExp["$1"];
}
}
console.log(isIE());//只有IE會返回版本號，其他瀏覽器都返回undefined
【2】chrome
function isChrome(){
var ua = navigator.userAgent;
//先排除opera,因為opera只是在chrome的userAgent后加入了自己的標(biāo)識
if(!/OPR/.test(ua)){
if(/Chrome\/(\S+)/.test(ua)){
return RegExp["$1"];
}
}
}
console.log(isChrome());//只有Chrome會返回版本號45.0.2454.93，其他瀏覽器都返回undefined
【3】safari
function isSafari(){
var ua = navigator.userAgent;
//先排除opera
if(!/OPR/.test(ua)){
//檢測出chrome和safari瀏覽器
if(/Safari/.test(ua)){
//檢測出safari
if(/Version\/(\S+)/.test(ua)){
return RegExp["$1"];
}
}
}
}
console.log(isSafari());//只有safari會返回版本號5.1.7，其他瀏覽器都返回undefined
【4】firefox
function isFireFox(){
if(/Firefox\/(\S+)/.test(navigator.userAgent)){
return RegExp["$1"];
}
}
console.log(isFireFox());//只有firefox會返回版本號40.0，其他瀏覽器都返回undefined
【5】opera
function isOpera(){
if(/OPR\/(\S+)/.test(navigator.userAgent)){
return RegExp["$1"];
}
}
console.log(isOpera());//只有opera會返回版本號32.0.1948.25，其他瀏覽器都返回undefined
識別操作系統(tǒng)
使用navigator.platform檢測操作系統(tǒng)更加簡單，因為其可能包括的值為“Win32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linux i686"等，且在不同瀏覽器中是一致的
而通過navigator.userAgent可以來得到window系統(tǒng)的詳細(xì)信息
windows版本 -> 內(nèi)核版本 Windows XP -> 5.1 Windows Vista -> 6.0 Windows 7 -> 6.1 Windows 8 -> 6.2 Windows 8.1 -> 6.3 Windows 10技術(shù)預(yù)覽版 -> 6.4 Windows 10.0 -> 10.0
function whichSyStem(){
var ua = navigator.userAgent;
var pf = navigator.platform;
if(/Mac/.test(pf)){
return "Mac";
}
if(/X11/.test(pf) || /Linux/.test(pf)){
return "Linux";
}
if(/Win/.test(pf)){
if(/Windows NT (\d+\.\d+)/.test(ua)){
switch(RegExp["$1"]){
case "5.0":
return "Windows 2000";
case "5.1":
return "Windows XP";
case "6.0":
return "Windows Vista";
case "6.1":
return "Windows 7";
case "6.2":
return "Windows 8";
case "6.3":
return "Windows 8.1";
case "6.4":
case "10.0":
return "Windows 10";
}
}
}
}
console.log(whichSyStem())//Windows 10
識別移動端
function whichMobile(){
var ua = navigator.userAgent;
if(/iPhone OS (\d+_\d+)/.test(ua)){
return 'iPhone' + RegExp.$1.replace("_",".");
}
if(/iPad.+OS (\d+_\d+)/.test(ua)){
return 'iPad' + RegExp.$1.replace("_",".")
}
if(/Android (\d+\.\d+)/.test(ua)){
return 'Android' + RegExp["$1"];
}
}
console.log(whichMobile())//Android 5.1
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
- JavaScript瀏覽器對象模型BOM(BrowserObjectModel)實例詳解
- Javascript之BOM(window對象)詳解
- JavaScript 瀏覽器對象模型BOM使用介紹
- javascript學(xué)習(xí)筆記（三）BOM和DOM詳解
- javascript bom是什么及bom和dom的區(qū)別
- Javascript基礎(chǔ)知識（三）BOM，DOM總結(jié)
- Javascript BOM學(xué)習(xí)小結(jié)(六)
- 實現(xiàn)JavaScript的組成----BOM和DOM詳解
- javascript的BOM匯總
- 你真的了解BOM中的history對象嗎
相關(guān)文章
js實現(xiàn)鼠標(biāo)觸發(fā)圖片抖動效果的方法
這篇文章主要介紹了js實現(xiàn)鼠標(biāo)觸發(fā)圖片抖動效果的方法,通過定時器定時遞歸調(diào)用rattleimage函數(shù)實現(xiàn)抖動效果,非常實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
xml轉(zhuǎn)json的js代碼，需要的朋友可以參考下2012-08-08
這篇文章主要介紹了webpack踩坑之路圖片的路徑與打包，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
Javascript ES6中對象類型Sets的介紹與使用詳解
這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了js基于cookie記錄來賓姓名的方法,涉及javascript使用cookie針對方可信息的存儲與讀取顯示相關(guān)技巧,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JavaScrip如果基于url實現(xiàn)圖片下載,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了uni-app使用微信小程序云函數(shù)的步驟示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
javascript制作照片墻及制作過程中出現(xiàn)的問題
這篇文章主要介紹了javascript制作照片墻及制作過程中出現(xiàn)的問題，感興趣的朋友可以參考一下2016-04-04
Javascript this 的一些學(xué)習(xí)總結(jié)
相信有C++、C#或Java等編程經(jīng)驗的各位，對于this關(guān)鍵字再熟悉不過了。由于Javascript是一種面向?qū)ο蟮木幊陶Z言，它和C++、C#或Java一樣都包含this關(guān)鍵字，接下來我們將向大家介紹Javascript中的this關(guān)鍵字2012-08-08
理解javascript函數(shù)式編程中的閉包（closure）
這篇文章主要幫助大家理解javascript函數(shù)式編程中的閉包（closure）概念，通俗地講， JavaScript 中每個的函數(shù)都是一個閉包，感興趣的小伙伴們可以參考一下2016-03-03