BOM之navigator對(duì)象和用戶代理檢測(cè)
前面的話
navigator對(duì)象現(xiàn)在已經(jīng)成為識(shí)別客戶端瀏覽器的事實(shí)標(biāo)準(zhǔn)，navigator對(duì)象是所有支持javascript的瀏覽器所共有的。本文將詳細(xì)介紹navigator對(duì)象和用戶代理檢測(cè)
屬性
與其他BOM對(duì)象的情況一樣，每個(gè)瀏覽器中的navigator對(duì)象也都有一套自己的屬性。下表列出了存在于所有瀏覽器中的屬性和方法，以及支持它們的瀏覽器版本
屬性 說(shuō)明
appCodeName 瀏覽器名稱[所有瀏覽器都返回Mozilla]
userAgent 瀏覽器的用戶代理字符串
appVersion 瀏覽器版本
appMinorVersion 次版本信息[IE返回0，chrome和firefox不支持]
platform 瀏覽器所在的系統(tǒng)平臺(tái)[所有瀏覽器都返回Win32]
plugins 瀏覽器中安裝的插件信息的數(shù)組
mimeTypes 在瀏覽器中注冊(cè)的MIME類型數(shù)組
language 瀏覽器主語(yǔ)言[IE10-不支持，其他瀏覽器返回zh-CN]
systemLanguage 操作系統(tǒng)語(yǔ)言[IE返回zh-CN，chrome和firefox不支持]
userLanguage 操作系統(tǒng)默認(rèn)語(yǔ)言[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ù)實(shí)際情況返回true或false，chrome和firefox始終返回true]
cookieEnabled 表示cookie是否啟用[所有瀏覽器都返回true]
javaEnabled 是否啟用java[IE8-瀏覽器返回{}，其他瀏覽器返回function javaEnabled()]
buildID 瀏覽器編譯版本[firefox返回20170125094131，chrome和IE不支持]
cpuClass 計(jì)算機(jī)使用的CPU類型[IE返回x86，chrome和firefox不支持]
oscpu 操作系統(tǒng)或使用的CPU[firefox返回Windows NT 10.0; WOW64，chrome和IE不支持]
檢測(cè)插件
檢測(cè)瀏覽器插件是一種最常見的檢測(cè)例程
對(duì)于非IE瀏覽器，可以使用plugins數(shù)組來(lái)達(dá)到這個(gè)目的該數(shù)組中的每一項(xiàng)都包含下列屬性
name:插件的名字
description:插件的描述
filename:插件的文件名
length:插件所處理的MIME類型數(shù)量
通過(guò)循環(huán)迭代每個(gè)插件并將插件的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;
}
}
}
//檢測(cè)flash
console.log(hasPlugin("Flash"));//true
對(duì)于IE瀏覽器，檢測(cè)插件的辦法是使用專有的ActiveXObject類型，并嘗試創(chuàng)建一個(gè)特定插件的實(shí)例。IE是使用COM對(duì)象來(lái)實(shí)現(xiàn)插件的，而COM對(duì)象使用唯一標(biāo)識(shí)符來(lái)標(biāo)識(shí)。因此，想檢查特定的插件就必須知道其COM標(biāo)識(shí)符。例如，F(xiàn)lash的標(biāo)識(shí)符是ShockwaveFlash.ShockwaveFlash
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
//檢測(cè)Flash
console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"))//true
【兼容寫法】
//檢測(cè)非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;
}
}
}
//檢測(cè)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
用戶代理檢測(cè)
navigator對(duì)象中最重要的作用就是使用useragent實(shí)現(xiàn)用戶代理檢測(cè)。用戶代理檢測(cè)是一種萬(wàn)不得已的做法，優(yōu)先級(jí)排在前面介紹過(guò)的能力檢測(cè)之后
發(fā)展歷史
1、1993年美國(guó)NCSA國(guó)家超級(jí)計(jì)算機(jī)中心發(fā)布了世界上第一款web瀏覽器Mosaic，該瀏覽器的用戶代理字符串為Mosaic/0.9
2、Netscape公司進(jìn)入瀏覽器開發(fā)領(lǐng)域，將自己產(chǎn)品的代號(hào)定名了Mozilla(Mosaic Killer)的簡(jiǎn)寫，用戶代理字符串格式為Mozilla/版本號(hào) [語(yǔ)言] (平臺(tái)；加密類型)
3、IE贏得用戶廣泛認(rèn)可的web瀏覽器IE3發(fā)布時(shí)，Netscape已經(jīng)占據(jù)了絕對(duì)市場(chǎng)份額，為了讓服務(wù)器能夠檢測(cè)到IE，IE將用戶代理字符串修改成兼容Netscape的形式：Mozilla/2.0(compatible;MSIE版本號(hào)；操作系統(tǒng))
4、各瀏覽器陸續(xù)出現(xiàn)，用戶代理字符串的顯示格式也越來(lái)越類似……
HTTP規(guī)范明確規(guī)定，瀏覽器應(yīng)該發(fā)送簡(jiǎn)短的用戶代理字符串，指明瀏覽器的名稱和版本號(hào)。但現(xiàn)實(shí)中卻沒(méi)有這么簡(jiǎn)單，各瀏覽器的檢測(cè)結(jié)果如下所示
檢測(cè)結(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
識(shí)別內(nèi)核
常見的內(nèi)核有Trident、Gecko和Webkit
[注意]因?yàn)門rident和Webkit的用戶代理字符串中可能會(huì)出現(xiàn)like Gecko的字眼，所以最后再測(cè)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"
識(shí)別瀏覽器
【1】IE
IE3-IE10都可以通過(guò)MSIE的版本號(hào)來(lái)判斷，因?yàn)橛械腎E11并不出現(xiàn)MSIE字符，且safari中也有rv字段，所以IE11需要通過(guò)rv后的版本號(hào)和Trident來(lái)配合判斷
function isIE(){
var ua = navigator.userAgent;
//檢測(cè)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"];
}
}
//檢測(cè)IE標(biāo)識(shí)，IE7-
if(/MSIE (\d+)/.test(ua)){
return RegExp["$1"];
}
}
console.log(isIE());//只有IE會(huì)返回版本號(hào)，其他瀏覽器都返回undefined
【2】chrome
function isChrome(){
var ua = navigator.userAgent;
//先排除opera,因?yàn)閛pera只是在chrome的userAgent后加入了自己的標(biāo)識(shí)
if(!/OPR/.test(ua)){
if(/Chrome\/(\S+)/.test(ua)){
return RegExp["$1"];
}
}
}
console.log(isChrome());//只有Chrome會(huì)返回版本號(hào)45.0.2454.93，其他瀏覽器都返回undefined
【3】safari
function isSafari(){
var ua = navigator.userAgent;
//先排除opera
if(!/OPR/.test(ua)){
//檢測(cè)出chrome和safari瀏覽器
if(/Safari/.test(ua)){
//檢測(cè)出safari
if(/Version\/(\S+)/.test(ua)){
return RegExp["$1"];
}
}
}
}
console.log(isSafari());//只有safari會(huì)返回版本號(hào)5.1.7，其他瀏覽器都返回undefined
【4】firefox
function isFireFox(){
if(/Firefox\/(\S+)/.test(navigator.userAgent)){
return RegExp["$1"];
}
}
console.log(isFireFox());//只有firefox會(huì)返回版本號(hào)40.0，其他瀏覽器都返回undefined
【5】opera
function isOpera(){
if(/OPR\/(\S+)/.test(navigator.userAgent)){
return RegExp["$1"];
}
}
console.log(isOpera());//只有opera會(huì)返回版本號(hào)32.0.1948.25，其他瀏覽器都返回undefined
識(shí)別操作系統(tǒng)
使用navigator.platform檢測(cè)操作系統(tǒng)更加簡(jiǎn)單，因?yàn)槠淇赡馨ǖ闹禐椤癢in32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linux i686"等，且在不同瀏覽器中是一致的
而通過(guò)navigator.userAgent可以來(lái)得到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
識(shí)別移動(dòng)端
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
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
- JavaScript瀏覽器對(duì)象模型BOM(BrowserObjectModel)實(shí)例詳解
- Javascript之BOM(window對(duì)象)詳解
- JavaScript 瀏覽器對(duì)象模型BOM使用介紹
- javascript學(xué)習(xí)筆記（三）BOM和DOM詳解
- javascript bom是什么及bom和dom的區(qū)別
- Javascript基礎(chǔ)知識(shí)（三）BOM，DOM總結(jié)
- Javascript BOM學(xué)習(xí)小結(jié)(六)
- 實(shí)現(xiàn)JavaScript的組成----BOM和DOM詳解
- javascript的BOM匯總
- 你真的了解BOM中的history對(duì)象嗎
相關(guān)文章
JavaScript canvas實(shí)現(xiàn)代碼雨效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)代碼雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
JS實(shí)現(xiàn)玩轉(zhuǎn)風(fēng)車
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)玩轉(zhuǎn)風(fēng)車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
數(shù)組去重，一般需求是給你一個(gè)數(shù)組，調(diào)用去重方法，返回?cái)?shù)值副本，副本中沒(méi)有重復(fù)元素。下面腳本之家小編給大家?guī)?lái)了js數(shù)組去重的多種方法，非常不錯(cuò)，需要的朋友參考下2017-09-09
Javascrip實(shí)現(xiàn)文字跳動(dòng)特效
這篇文章主要介紹了Javascrip實(shí)現(xiàn)文字跳動(dòng)特效的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
利用element-ui實(shí)現(xiàn)遠(yuǎn)程搜索兩種實(shí)現(xiàn)方式
這篇文章主要介紹了利用element-ui的兩種遠(yuǎn)程搜索實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
JAVASCRIPT車架號(hào)識(shí)別/驗(yàn)證函數(shù)代碼 汽車車架號(hào)驗(yàn)證程序
JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理
淺析$.getJSON異步請(qǐng)求和同步請(qǐng)求