JavaScript Navigator 對象，Screen 對象

2023-03-20 15:46 更新

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

navigator.userAgent屬性返回瀏覽器的 User Agent 字符串，表示用戶設(shè)備信息，包含了瀏覽器的廠商、版本、操作系統(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屬性識別瀏覽器，不是一個(gè)好辦法。因?yàn)楸仨毧紤]所有的情況（不同的瀏覽器，不同的版本），非常麻煩，而且用戶可以改變這個(gè)字符串。這個(gè)字符串的格式并無統(tǒng)一規(guī)定，也無法保證未來的適用性，各種上網(wǎng)設(shè)備層出不窮，難以窮盡。所以，現(xiàn)在一般不再通過它識別瀏覽器了，而是使用“功能識別”方法，即逐一測試當(dāng)前瀏覽器是否支持要用到的 JavaScript 功能。

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

var ua = navigator.userAgent.toLowerCase();

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

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

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

Navigator.plugins屬性返回一個(gè)類似數(shù)組的對象，成員是 Plugin 實(shí)例對象，表示瀏覽器安裝的插件，比如 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屬性返回一個(gè)布爾值，表示用戶當(dāng)前在線還是離線（瀏覽器斷線）。

navigator.onLine // true

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

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

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

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

navigator.language // "en"

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

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

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

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

Geolocation 對象提供下面三個(gè)方法。

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

注意，調(diào)用這三個(gè)方法時(shí)，瀏覽器會(huì)跳出一個(gè)對話框，要求用戶給予授權(quán)。

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

navigator.cookieEnabled // true

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

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

navigator.javaEnabled() // false

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

Navigator 對象有一些實(shí)驗(yàn)性屬性，在部分瀏覽器可用。

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

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

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

上面示例中，只有當(dāng)前內(nèi)存大于 1GB，才加載大型的腳本。

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

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

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

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

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

let workerList = [];

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

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

navigator.connection屬性返回一個(gè)對象，包含當(dāng)前網(wǎng)絡(luò)連接的相關(guān)信息。

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

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

Screen 對象 

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

該對象有下面的屬性。

  • Screen.height：瀏覽器窗口所在的屏幕的高度（單位像素）。除非調(diào)整顯示器的分辨率，否則這個(gè)值可以看作常量，不會(huì)發(fā)生變化。顯示器的分辨率與瀏覽器設(shè)置無關(guān)，縮放網(wǎng)頁并不會(huì)改變分辨率。
  • Screen.width：瀏覽器窗口所在的屏幕的寬度（單位像素）。
  • Screen.availHeight：瀏覽器窗口可用的屏幕高度（單位像素）。因?yàn)椴糠挚臻g可能不可用，比如系統(tǒng)的任務(wù)欄或者 Mac 系統(tǒng)屏幕底部的 Dock 區(qū)，這個(gè)屬性等于height減去那些被系統(tǒng)組件的高度。
  • Screen.availWidth：瀏覽器窗口可用的屏幕寬度（單位像素）。
  • Screen.pixelDepth：整數(shù)，表示屏幕的色彩位數(shù)，比如24表示屏幕提供24位色彩。
  • Screen.colorDepth：Screen.pixelDepth的別名。嚴(yán)格地說，colorDepth 表示應(yīng)用程序的顏色深度，pixelDepth 表示屏幕的顏色深度，絕大多數(shù)情況下，它們都是同一件事。
  • Screen.orientation：返回一個(gè)對象，表示屏幕的方向。該對象的type屬性是一個(gè)字符串，表示屏幕的具體方向，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ù)屏幕的寬度，將用戶導(dǎo)向不同網(wǎng)頁的代碼。

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


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號