JavaScript Navigator 對象，Screen 對象

2023-03-20 15:46 更新

window.navigator屬性指向一個包含瀏覽器和系統(tǒng)信息的 Navigator 對象。腳本通過這個屬性了解用戶的環(huán)境信息。

navigator.userAgent屬性返回瀏覽器的 User Agent 字符串，表示用戶設備信息，包含了瀏覽器的廠商、版本、操作系統(tǒng)等信息。

下面是 Chrome 瀏覽器的userAgent。

navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

通過userAgent屬性識別瀏覽器，不是一個好辦法。因為必須考慮所有的情況（不同的瀏覽器，不同的版本），非常麻煩，而且用戶可以改變這個字符串。這個字符串的格式并無統(tǒng)一規(guī)定，也無法保證未來的適用性，各種上網(wǎng)設備層出不窮，難以窮盡。所以，現(xiàn)在一般不再通過它識別瀏覽器了，而是使用“功能識別”方法，即逐一測試當前瀏覽器是否支持要用到的 JavaScript 功能。

不過，通過userAgent可以大致準確地識別手機瀏覽器，方法就是測試是否包含mobi字符串。

var ua = navigator.userAgent.toLowerCase();

if (/mobi/.test(ua)) {
  // 手機瀏覽器
} else {
  // 非手機瀏覽器
}

如果想要識別所有移動設備的瀏覽器，可以測試更多的特征字符串。

/mobi|android|touch|mini/.test(ua)

Navigator.plugins屬性返回一個類似數(shù)組的對象，成員是 Plugin 實例對象，表示瀏覽器安裝的插件，比如 Flash、ActiveX 等。

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屬性返回用戶的操作系統(tǒng)信息，比如MacIntel、Win32、Linux x86_64等 。

navigator.platform
// "Linux x86_64"

navigator.onLine屬性返回一個布爾值，表示用戶當前在線還是離線（瀏覽器斷線）。

navigator.onLine // true

有時，瀏覽器可以連接局域網(wǎng)，但是局域網(wǎng)不能連通外網(wǎng)。這時，有的瀏覽器的onLine屬性會返回true，所以不能假定只要是true，用戶就一定能訪問互聯(lián)網(wǎng)。不過，如果是false，可以斷定用戶一定離線。

用戶變成在線會觸發(fā)online事件，變成離線會觸發(fā)offline事件，可以通過window.ononline和window.onoffline指定這兩個事件的回調函數(shù)。

window.addEventListener('offline', function(e) { console.log('offline'); });
window.addEventListener('online', function(e) { console.log('online'); });

Navigator.language屬性返回一個字符串，表示瀏覽器的首選語言。該屬性只讀。

navigator.language // "en"

Navigator.languages屬性返回一個數(shù)組，表示用戶可以接受的語言。Navigator.language總是這個數(shù)組的第一個成員。HTTP 請求頭信息的Accept-Language字段，就來自這個數(shù)組。

navigator.languages  // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

如果這個屬性發(fā)生變化，就會在window對象上觸發(fā)languagechange事件。

Navigator.geolocation屬性返回一個 Geolocation 對象，包含用戶地理位置的信息。注意，該 API 只有在 HTTPS 協(xié)議下可用，否則調用下面方法時會報錯。

Geolocation 對象提供下面三個方法。

  • Geolocation.getCurrentPosition()：得到用戶的當前位置
  • Geolocation.watchPosition()：監(jiān)聽用戶位置變化
  • Geolocation.clearWatch()：取消watchPosition()方法指定的監(jiān)聽函數(shù)

注意，調用這三個方法時，瀏覽器會跳出一個對話框，要求用戶給予授權。

navigator.cookieEnabled屬性返回一個布爾值，表示瀏覽器的 Cookie 功能是否打開。

navigator.cookieEnabled // true

注意，這個屬性反映的是瀏覽器總的特性，與是否儲存某個具體的網(wǎng)站的 Cookie 無關。用戶可以設置某個網(wǎng)站不得儲存 Cookie，這時cookieEnabled返回的還是true。

navigator.javaEnabled()方法返回一個布爾值，表示瀏覽器是否能運行 Java Applet 小程序。

navigator.javaEnabled() // false

Navigator.sendBeacon()方法用于向服務器異步發(fā)送數(shù)據(jù)，詳見《XMLHttpRequest 對象》一章。

Navigator 對象有一些實驗性屬性，在部分瀏覽器可用。

navigator.deviceMemory屬性返回當前計算機的內存數(shù)量（單位為 GB）。該屬性只讀，只在 HTTPS 環(huán)境下可用。

它的返回值是一個近似值，四舍五入到最接近的2的冪，通常是 0.25、0.5、1、2、4、8。實際內存超過 8GB，也返回8。

if (navigator.deviceMemory > 1) {
  await import('./costly-module.js');
}

上面示例中，只有當前內存大于 1GB，才加載大型的腳本。

navigator.hardwareConcurrency屬性返回用戶計算機上可用的邏輯處理器的數(shù)量。該屬性只讀。

現(xiàn)代計算機的 CPU 有多個物理核心，每個物理核心有時支持一次運行多個線程。因此，四核 CPU 可以提供八個邏輯處理器核心。

if (navigator.hardwareConcurrency > 4) {
  await import('./costly-module.js');
}

上面示例中，可用的邏輯處理器大于4，才會加載大型腳本。

該屬性通過用于創(chuàng)建 Web Worker，每個可用的邏輯處理器都創(chuàng)建一個 Worker。

let workerList = [];

for (let i = 0; i < window.navigator.hardwareConcurrency; i++) {
  let newWorker = {
    worker: new Worker('cpuworker.js'),
    inUse: false
  };
  workerList.push(newWorker);
}

上面示例中，有多少個可用的邏輯處理器，就創(chuàng)建多少個 Web Worker。

navigator.connection屬性返回一個對象，包含當前網(wǎng)絡連接的相關信息。

  • downlink：有效帶寬估計值（單位：兆比特/秒，Mbps），四舍五入到每秒 25KB 的最接近倍數(shù)。
  • downlinkMax：當前連接的最大下行鏈路速度（單位：兆比特每秒，Mbps）。
  • effectiveType：返回連接的等效類型，可能的值為slow-2g、2g、3g、4g。
  • rtt：當前連接的估計有效往返時間，四舍五入到最接近的25毫秒的倍數(shù)。
  • saveData：用戶是否設置了瀏覽器的減少數(shù)據(jù)使用量選項（比如不加載圖片），返回true或者false。
  • type：當前連接的介質類型，可能的值為bluetooth、cellular、ethernet、none、wifi、wimax、other、unknown。
if (navigator.connection.effectiveType === '4g') {
  await import('./costly-module.js');
}

上面示例中，如果網(wǎng)絡連接是 4G，則加載大型腳本。

Screen 對象 

Screen 對象表示當前窗口所在的屏幕，提供顯示設備的信息。window.screen屬性指向這個對象。

該對象有下面的屬性。

  • Screen.height：瀏覽器窗口所在的屏幕的高度（單位像素）。除非調整顯示器的分辨率，否則這個值可以看作常量，不會發(fā)生變化。顯示器的分辨率與瀏覽器設置無關，縮放網(wǎng)頁并不會改變分辨率。
  • Screen.width：瀏覽器窗口所在的屏幕的寬度（單位像素）。
  • Screen.availHeight：瀏覽器窗口可用的屏幕高度（單位像素）。因為部分空間可能不可用，比如系統(tǒng)的任務欄或者 Mac 系統(tǒng)屏幕底部的 Dock 區(qū)，這個屬性等于height減去那些被系統(tǒng)組件的高度。
  • Screen.availWidth：瀏覽器窗口可用的屏幕寬度（單位像素）。
  • Screen.pixelDepth：整數(shù)，表示屏幕的色彩位數(shù)，比如24表示屏幕提供24位色彩。
  • Screen.colorDepth：Screen.pixelDepth的別名。嚴格地說，colorDepth 表示應用程序的顏色深度，pixelDepth 表示屏幕的顏色深度，絕大多數(shù)情況下，它們都是同一件事。
  • Screen.orientation：返回一個對象，表示屏幕的方向。該對象的type屬性是一個字符串，表示屏幕的具體方向，landscape-primary表示橫放，landscape-secondary表示顛倒的橫放，portrait-primary表示豎放，portrait-secondary表示顛倒的豎放。

下面是Screen.orientation的例子。

window.screen.orientation
// { angle: 0, type: "landscape-primary", onchange: null }

下面的例子保證屏幕分辨率大于 1024 x 768。

if (window.screen.width >= 1024 && window.screen.height >= 768) {
  // 分辨率不低于 1024x768
}

下面是根據(jù)屏幕的寬度，將用戶導向不同網(wǎng)頁的代碼。

if ((screen.width <= 800) && (screen.height <= 600)) {
  window.location.replace('small.html');
} else {
  window.location.replace('wide.html');
}


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號