JavaScript Navigator Object: Browser Capabilities, Language and User Agent

The navigator object exposes information and capabilities associated with the browser environment. It can report language preferences and cookie support, and it is also the entry point for APIs such as geolocation, clipboard, sharing and permissions when those features are available.

navigator.language
navigator.languages
navigator.cookieEnabled
navigator.userAgent

Do not build new code around browser-name detection. The original tutorial used userAgent, appName, appVersion and similar values to choose browser-specific code. Modern browsers intentionally expose compatibility-oriented or reduced values, so feature detection is more reliable.

On this page

Your browser's navigator values
Modern capability detection
Legacy properties and browser sniffing
Complete source

Navigator values reported by your browser Top ↑

Prefer capability detection Top ↑

If your code depends on a browser feature, test for that feature instead of guessing the browser name. A browser version or user-agent string does not guarantee that a particular API is usable in the current context.

if ("geolocation" in navigator) {
  // The capability exists; request/use it only when appropriate.
}

if ("clipboard" in navigator) {
  // Clipboard API is exposed in this context.
}

Capability detection should still be followed by normal permission/error handling where an API requires user permission or a secure context.

Legacy properties and browser sniffing Top ↑

The original page taught browser identification with values such as navigator.appName, navigator.appVersion, navigator.appCodeName, navigator.platform and navigator.userAgent. These concepts are preserved here because older code still contains them.

appName is a compatibility property and commonly returns Netscape, not a useful modern browser name.
appCodeName is also a compatibility value and commonly returns Mozilla.
appVersion, platform and userAgent can expose reduced, spoofed or compatibility-oriented values. They should not be the default basis for feature support decisions.
navigator.browserLanguage, shown on the original page, was non-standard. Use navigator.language / navigator.languages.

Historical browser-sniffing pattern

if (navigator.userAgent.includes("Firefox")) {
  // Historical browser-specific branch
} else if (navigator.userAgent.includes("Opera")) {
  // Historical browser-specific branch
}

This remains useful when reading legacy projects, but new code should normally branch on the capability it actually needs.

Complete source for the live navigator demo Top ↑

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigator object demo</title>
</head>
<body>
<dl id="navigatorDetails"></dl>
<script>
const details = [
  ["userAgent", navigator.userAgent],
  ["language", navigator.language],
  ["languages", navigator.languages.join(", ")],
  ["cookieEnabled", navigator.cookieEnabled],
  ["platform (legacy)", navigator.platform],
  ["appName (legacy)", navigator.appName],
  ["appVersion (legacy)", navigator.appVersion],
  ["appCodeName (legacy)", navigator.appCodeName]
];
const output = document.getElementById("navigatorDetails");
details.forEach(([label, value]) => {
  const term = document.createElement("dt");
  const detail = document.createElement("dd");
  term.textContent = label;
  detail.textContent = String(value);
  output.append(term, detail);
});
</script>
</body>
</html>

JavaScript Basic

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

JavaScript Navigator Object: Browser Information and Capability Detection