js筆記系列之--Navigator對象理解及判斷

高勝山發布于2019-08-22 15:20 / 933人閱讀

摘要：入門系列之位置及相對位置事件坐標對象在寫前端頁面的時候，我們會碰到不同瀏覽器下不同邏輯的情況。指明系統是否處于脫機模式的布爾值。運行瀏覽器的操作系統平臺。由客戶機發送服務器的頭部的值。

js入門系列之

位置及相對位置事件坐標

Navigator對象
在寫前端頁面的時候，我們會碰到不同瀏覽器下不同邏輯的情況。這個時候我們就有必要通過js代碼來確認當前瀏覽器的種類以及版本，這個時候我們就需要借助窗口中的navigaitor對象。首先我們來了解一下navigator，在控制欄輸出看一下：

下面我們來解釋一下對象中對應各屬性的概念：

appCodeName    瀏覽器的代碼名。
appMinorVersion    瀏覽器的次級版本。
appName    瀏覽器的名稱。
appVersion    瀏覽器的平臺和版本信息。
browserLanguage    當前瀏覽器的語言。
cookieEnabled    指明瀏覽器中是否啟用 cookie 的布爾值。
cpuClass    瀏覽器系統的 CPU 等級。
onLine    指明系統是否處于脫機模式的布爾值。
platform    運行瀏覽器的操作系統平臺。
systemLanguage     OS 使用的默認語言。
userAgent    由客戶機發送服務器的 user-agent 頭部的值。
userLanguage    OS 的自然語言設置。

了解了navigator下對應的屬性信息，我們可以獲取很多有效的信息，比如當前的瀏覽器、瀏覽器版本以及當前電腦操作系統等等~是不是很棒棒呢~下面我們來寫一段簡單的代碼來判斷當前的瀏覽器：

var UserAgent =window.navigator.userAgent.toLowerCase();
function getBrowserType(UserAgent){
var result={
      isIE6: /msie 6.0/.test(UserAgent), // IE6
      isIE7: /msie 7.0/.test(UserAgent), // IE7
      isIE8: /msie 8.0/.test(UserAgent), // IE8
      isIE9: /msie 9.0/.test(UserAgent), // IE9
      isIE10: /msie 10.0/.test(UserAgent), // IE10
      isIE11: /msie 11.0/.test(UserAgent), // IE11
      isLB: /lbbrowser/.test(UserAgent), // 獵豹瀏覽器
      isUc: /ucweb/.test(UserAgent), // UC瀏覽器
      is360: /360se/.test(UserAgent), // 360瀏覽器
      isBaidu: /bidubrowser/.test(UserAgent), // 百度瀏覽
      isSougou: /metasr/.test(UserAgent), // 搜狗瀏覽器
      isChrome: /chrome/.test(UserAgent), 
      //Chrome瀏覽器
      isFirefox: /firefox/.test(UserAgent), // 火狐瀏覽器
      isOpera: /opera/.test(UserAgent), // Opera瀏覽器
      isSafiri: /safari/.test(UserAgent) && !/chrome/.test
 (UserAgent), // safire瀏覽器
      isQQ: /qqbrowser/.test(UserAgent)//qq瀏覽器
    };
 return result;
}
console.log(getBrowserType(UserAgent));

下圖則是代碼運行的結果：

就這樣，我們可以簡單的判斷當前瀏覽器的種類從而達到分瀏覽器處理的效果了~

GPU云服務器云服務器深入理解系列系列之系列之二架構之坑系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93377.html

JS系列之BOM

摘要：顧名思義，父對象始終指向當前框架的直接上層框架。與框架有關的最后一個對象是，它始終指向實際上，和對象可以互換使用。同時，這也意味著可以將不同層次的對象連綴起來，例如。對象就是判斷用戶的瀏覽器以及操作系統。 BOM BOM Browser Object Model, 瀏覽器對象模型showImg(https://segmentfault.com/img/bVbjS3b?w=663&h=4...

edagarli 2019-08-26 13:25 評論0 收藏0
慕課網js面試題學習筆記(ES6 標準) ——實時更新

摘要：而第一種方法只能判斷引用類型，不能判斷值類型，因為值類型沒有對應的構造函數描述一個對象的過程生成一個新的空對象指向這個新對象執行構造函數中的代碼，即對賦值將新對象的屬性指向構造函數的屬性返回，即得到新對象。最近在在看前端面試教程，這篇文章里大部分是看視頻的過程中自己遇到的不清楚的知識點，內容很簡單，只是起到一個梳理作用。有些地方也根據自己的理解在作者的基礎上加了點東西，如有錯誤，歡迎...

netmou 2019-08-20 18:10 評論0 收藏0
深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
JavaScript 之 BOM

摘要：描述表示為瀏覽器對象模型是由一系列對象構成的，這些對象可以理解為是瀏覽器提供的對象表示當前運行頁面的瀏覽器對象既是訪問瀏覽器的窗口，也是規范中的全局對象對象測試對象全局變量函數作為全局變量或函數使用的話全局變量是對象的屬性函數是對象的方法預 BOM 描述 BOM表示為瀏覽器對象模型 BOM是由一系列對象構成的，這些對象可以理解為是瀏覽器提供的 Window對象表示當前運行HTM...

nifhlheimr 2019-08-23 11:44 評論0 收藏0