JavaScript navigator Object

JavaScript 的 navigator 物件讓你可以存取使用者的瀏覽器資訊。

navigator 物件內建提供很多不同的屬性 (properties) 和方法 (methods)。

cookieEnabled 屬性可以用來檢查瀏覽器的 cookie 功能是否有開啟：

const cookieEnabled = navigator.cookieEnabled;

if (!navigator.cookieEnabled) {
  alert('瀏覽本站請啟用 cookie 功能');
}

cookieEnabled 屬性返回布林值 true or false。

檢查使用者的瀏覽器 (電腦) 是否有連上網路 navigator.onLine

navigator.onLine 屬性可以用來檢查使用者的瀏覽器是否有連上網路或是斷線了：

// true
navigator.onLine;

返回布林值 true or false。

取得瀏覽器相關的版本資訊

navigator.appName 可以用來取得瀏覽器的版本名稱，目前的瀏覽器 IE11+, Chrome, Firefox 和 Safari 都統一會返回 "Netscape"：

// Netscape
navigator.appName;

navigator.appCodeName 可以用來取得瀏覽器的代碼名稱 (code name)：

// Mozilla
navigator.appCodeName;

navigator.product 可以用來取得瀏覽器的引擎名稱：

// Gecko
navigator.product;

navigator.appVersion 可以用來取得瀏覽器的版本號：

// "5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36"
navigator.appVersion;

navigator.userAgent 可以用來取得瀏覽器完整的版本資訊：

// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36"
navigator.userAgent;

navigator.vendor 可以用來取得瀏覽器的廠商名稱：

// 如果是 Chrome 瀏覽器會顯示 "Google Inc."
navigator.vendor;

取得平台 (作業系統) 的資訊 navigator.platform

navigator.platform 可以用來取得瀏覽器所在的平台 (作業系統) 的名稱：

// MacIntel
navigator.platform;

可能會有的值像是 "MacIntel", "Win32", "FreeBSD i386", "WebTV OS"。

取得瀏覽器設定的語系 navigator.language

navigator.language 可以用來取得使用者的瀏覽器所設定的語系 (語言)：

// zh-TW
navigator.language;

可能會有的值像是 "zh-TW" (台灣繁體中文), "en", "en-US", "fr", "es-ES"，定義在 BCP 47 文件中。

現代常用 Navigator API

除了上述基礎屬性，現代瀏覽器還提供了一些強大的 API 供開發者使用。

非同步發送數據 navigator.sendBeacon()

在使用者離開頁面時，傳統的 AJAX 請求可能會因為頁面過早關閉而失敗。sendBeacon() 方法專為此設計，它能可靠地非同步發送少量數據（如分析數據或日誌），且不會延遲頁面跳轉或卸載。

document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    const data = JSON.stringify({ event: 'page_hide', time: Date.now() });
    navigator.sendBeacon('/log', data);
  }
});
sendBeacon() 會將請求放入瀏覽器的發送隊列中，即使頁面關閉，瀏覽器仍會保證將數據發出。

剪貼簿操作 navigator.clipboard

clipboard 物件讓我們可以透過 JavaScript 讀取或寫入剪貼簿內容。此 API 是非同步的且基於 Promise，通常需要使用 HTTPS 安全環境。

// 寫入文字到剪貼簿
navigator.clipboard.writeText('Hello World').then(() => {
  console.log('成功複製！');
});

// 讀取剪貼簿內容
navigator.clipboard.readText().then((text) => {
  console.log('剪貼簿內容：', text);
});

原生分享功能 navigator.share()

Web Share API 可調用行動裝置或作業系統的原生分享介面。此功能必須由使用者主動觸發（如點擊按鈕）。

if (navigator.share) {
  navigator
    .share({
      title: 'Fooish 程式教學',
      text: '快來學 JavaScript！',
      url: 'https://www.fooish.com/javascript/',
    })
    .then(() => console.log('分享成功'));
}

取得地理位置 navigator.geolocation

geolocation 屬性可用於取得使用者的地理座標（經緯度）。出於隱私考量，瀏覽器會詢問使用者是否允許。

navigator.geolocation.getCurrentPosition(function (position) {
  console.log('緯度：', position.coords.latitude);
  console.log('經度：', position.coords.longitude);
});

現代 UA 資訊 navigator.userAgentData

由於 userAgent 字串過於混亂且存在隱私風險，現代瀏覽器（如 Chrome）開始推廣 userAgentData 作為替代方案，提供更結構化的資訊。

if (navigator.userAgentData) {
  console.log('品牌：', navigator.userAgentData.brands);
  console.log('平台：', navigator.userAgentData.platform);
  console.log('是否為行動裝置：', navigator.userAgentData.mobile);
}

判斷使用者的瀏覽器是否允許執行 Java 程式 navigator.javaEnabled()

// false
navigator.javaEnabled();

`navigator.javaEnabled()` 方法會返回布林值 true or false。