# Navigator 對象，Screen 對象。 `window.navigator`屬性指向一個包含瀏覽器和系統信息的 Navigator 對象。腳本通過這個屬性了解用戶的環境信息。 ## Navigator 對象的屬性 ### Navigator.userAgent `navigator.userAgent`屬性返回瀏覽器的 User Agent 字符串，表示瀏覽器的廠商和版本信息。 下面是 Chrome 瀏覽器的`userAgent`。 ```javascript navigator.userAgent // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36" ``` 通過`userAgent`屬性識別瀏覽器，不是一個好辦法。因為必須考慮所有的情況（不同的瀏覽器，不同的版本），非常麻煩，而且用戶可以改變這個字符串。這個字符串的格式并無統一規定，也無法保證未來的適用性，各種上網設備層出不窮，難以窮盡。所以，現在一般不再通過它識別瀏覽器了，而是使用“功能識別”方法，即逐一測試當前瀏覽器是否支持要用到的 JavaScript 功能。 不過，通過`userAgent`可以大致準確地識別手機瀏覽器，方法就是測試是否包含`mobi`字符串。 ```javascript var ua = navigator.userAgent.toLowerCase(); if (/mobi/i.test(ua)) { // 手機瀏覽器 } else { // 非手機瀏覽器 } ``` 如果想要識別所有移動設備的瀏覽器，可以測試更多的特征字符串。 ```javascript /mobi|android|touch|mini/i.test(ua) ``` ### Navigator.plugins `Navigator.plugins`屬性返回一個類似數組的對象，成員是 Plugin 實例對象，表示瀏覽器安裝的插件，比如 Flash、ActiveX 等。 ```javascript var pluginsLength = navigator.plugins.length; for (var i = 0; i < pluginsLength; i++) { console.log(navigator.plugins[i].name); console.log(navigator.plugins[i].filename); console.log(navigator.plugins[i].description); console.log(navigator.plugins[i].version); } ``` ### Navigator.platform `Navigator.platform`屬性返回用戶的操作系統信息，比如`MacIntel`、`Win32`、`Linux x86_64`等 。 ```javascript navigator.platform // "Linux x86_64" ``` ### Navigator.onLine `navigator.onLine`屬性返回一個布爾值，表示用戶當前在線還是離線（瀏覽器斷線）。 ```javascript navigator.onLine // true ``` 有時，瀏覽器可以連接局域網，但是局域網不能連通外網。這時，有的瀏覽器的`onLine`屬性會返回`true`，所以不能假定只要是`true`，用戶就一定能訪問互聯網。不過，如果是`false`，可以斷定用戶一定離線。 用戶變成在線會觸發`online`事件，變成離線會觸發`offline`事件，可以通過`window.ononline`和`window.onoffline`指定這兩個事件的回調函數。 ```javascript window.addEventListener('offline', function(e) { console.log('offline'); }); window.addEventListener('online', function(e) { console.log('online'); }); ``` ### Navigator.language，Navigator.languages `Navigator.language`屬性返回一個字符串，表示瀏覽器的首選語言。該屬性只讀。 ```javascript navigator.language // "en" ``` `Navigator.languages`屬性返回一個數組，表示用戶可以接受的語言。`Navigator.language`總是這個數組的第一個成員。HTTP 請求頭信息的`Accept-Language`字段，就來自這個數組。 ```javascript navigator.languages // ["en-US", "en", "zh-CN", "zh", "zh-TW"] ``` 如果這個屬性發生變化，就會在`window`對象上觸發`languagechange`事件。 ### Navigator.geolocation `Navigator.geolocation`屬性返回一個 Geolocation 對象，包含用戶地理位置的信息。注意，該 API 只有在 HTTPS 協議下可用，否則調用下面方法時會報錯。 Geolocation 對象提供下面三個方法。 - Geolocation.getCurrentPosition()：得到用戶的當前位置 - Geolocation.watchPosition()：監聽用戶位置變化 - Geolocation.clearWatch()：取消`watchPosition()`方法指定的監聽函數 注意，調用這三個方法時，瀏覽器會跳出一個對話框，要求用戶給予授權。 ### Navigator.cookieEnabled `navigator.cookieEnabled`屬性返回一個布爾值，表示瀏覽器的 Cookie 功能是否打開。 ```javascript navigator.cookieEnabled // true ``` 注意，這個屬性反映的是瀏覽器總的特性，與是否儲存某個具體的網站的 Cookie 無關。用戶可以設置某個網站不得儲存 Cookie，這時`cookieEnabled`返回的還是`true`。 ## Navigator 對象的方法 ### Navigator.javaEnabled() `navigator.javaEnabled()`方法返回一個布爾值，表示瀏覽器是否能運行 Java Applet 小程序。 ```javascript navigator.javaEnabled() // false ``` ### Navigator.sendBeacon() `Navigator.sendBeacon()`方法用于向服務器異步發送數據，詳見《XMLHttpRequest 對象》一章。 ## Navigator 的實驗性屬性 Navigator 對象有一些實驗性屬性，在部分瀏覽器可用。 ### Navigator.deviceMemory `navigator.deviceMemory`屬性返回當前計算機的內存數量（單位為 GB）。該屬性只讀，只在 HTTPS 環境下可用。 它的返回值是一個近似值，四舍五入到最接近的2的冪，通常是 0.25、0.5、1、2、4、8。實際內存超過 8GB，也返回`8`。 ```javascript if (navigator.deviceMemory > 1) { await import('./costly-module.js'); } ``` 上面示例中，只有當前內存大于 1GB，才加載大型的腳本。 ### Navigator.hardwareConcurrency `navigator.hardwareConcurrency`屬性返回用戶計算機上可用的邏輯處理器的數量。該屬性只讀。 現代計算機的 CPU 有多個物理核心，每個物理核心有時支持一次運行多個線程。因此，四核 CPU 可以提供八個邏輯處理器核心。 ```javascript if (navigator.hardwareConcurrency > 4) { await import('./costly-module.js'); } ``` 上面示例中，可用的邏輯處理器大于4，才會加載大型腳本。 該屬性通過用于創建 Web Worker，每個可用的邏輯處理器都創建一個 Worker。 ```javascript let workerList = []; for (let i = 0; i < window.navigator.hardwareConcurrency; i++) { let newWorker = { worker: new Worker('cpuworker.js'), inUse: false }; workerList.push(newWorker); } ``` 上面示例中，有多少個可用的邏輯處理器，就創建多少個 Web Worker。 ### Navigator.connection `navigator.connection`屬性返回一個對象，包含當前網絡連接的相關信息。 - downlink：有效帶寬估計值（單位：兆比特/秒，Mbps），四舍五入到每秒 25KB 的最接近倍數。 - downlinkMax：當前連接的最大下行鏈路速度（單位：兆比特每秒，Mbps）。 - effectiveType：返回連接的等效類型，可能的值為`slow-2g`、`2g`、`3g`、`4g`。 - rtt：當前連接的估計有效往返時間，四舍五入到最接近的25毫秒的倍數。 - saveData：用戶是否設置了瀏覽器的減少數據使用量選項（比如不加載圖片），返回`true`或者`false`。 - type：當前連接的介質類型，可能的值為`bluetooth`、`cellular`、`ethernet`、`none`、`wifi`、`wimax`、`other`、`unknown`。 ```javascript if (navigator.connection.effectiveType === '4g') { await import('./costly-module.js'); } ``` 上面示例中，如果網絡連接是 4G，則加載大型腳本。 ## Screen 對象 Screen 對象表示當前窗口所在的屏幕，提供顯示設備的信息。`window.screen`屬性指向這個對象。 該對象有下面的屬性。 - `Screen.height`：瀏覽器窗口所在的屏幕的高度（單位像素）。除非調整顯示器的分辨率，否則這個值可以看作常量，不會發生變化。顯示器的分辨率與瀏覽器設置無關，縮放網頁并不會改變分辨率。 - `Screen.width`：瀏覽器窗口所在的屏幕的寬度（單位像素）。 - `Screen.availHeight`：瀏覽器窗口可用的屏幕高度（單位像素）。因為部分空間可能不可用，比如系統的任務欄或者 Mac 系統屏幕底部的 Dock 區，這個屬性等于`height`減去那些被系統組件的高度。 - `Screen.availWidth`：瀏覽器窗口可用的屏幕寬度（單位像素）。 - `Screen.pixelDepth`：整數，表示屏幕的色彩位數，比如`24`表示屏幕提供24位色彩。 - `Screen.colorDepth`：`Screen.pixelDepth`的別名。嚴格地說，colorDepth 表示應用程序的顏色深度，pixelDepth 表示屏幕的顏色深度，絕大多數情況下，它們都是同一件事。 - `Screen.orientation`：返回一個對象，表示屏幕的方向。該對象的`type`屬性是一個字符串，表示屏幕的具體方向，`landscape-primary`表示橫放，`landscape-secondary`表示顛倒的橫放，`portrait-primary`表示豎放，`portrait-secondary`表示顛倒的豎放。 下面是`Screen.orientation`的例子。 ```javascript window.screen.orientation //?{ angle: 0, type: "landscape-primary", onchange: null } ``` 下面的例子保證屏幕分辨率大于 1024 x 768。 ```javascript if (window.screen.width >= 1024 && window.screen.height >= 768) { // 分辨率不低于 1024x768 } ``` 下面是根據屏幕的寬度，將用戶導向不同網頁的代碼。 ```javascript if ((screen.width <= 800) && (screen.height <= 600)) { window.location.replace('small.html'); } else { window.location.replace('wide.html'); } ```