JavaScript Window Navigator

In this tutorial you will learn about the JavaScript window navigator object.

The Navigator Object

The navigator property of a window (i.e. window.navigator) is a reference to a Navigator object; it is a read-only property which contains information about the user's browser.

Since Window is a global object and it is at the top of the scope chain, so properties of the Window object such as window.navigator can be accessed without window. prefix, for example window.navigator.language can be written as navigator.language.

The following section will show you how to get various information about user's browser.

Detect Whether the Browser is Online or Offline

You can use the navigator.onLine property to detect whether the browser (or, application) is online or offline. This property returns a Boolean value true meaning online, or false meaning offline.

<script>
function checkConnectionStatus() {
    if(navigator.onLine) {
        alert("Application is online.");
    } else {
        alert("Application is offline.");
    }
}
</script>
 
<button type="button" onclick="checkConnectionStatus();">Check Connection Status</button>

Browser fires online and offline events when a connection is establish or lost. You can attach handler functions to these events in order to customize your application for online and offline scenarios.

Let's take a look at the following JavaScript code to see how this works:

<script>
function goOnline() {
    // Action to be performed when your application goes online
    alert("And we're back!");
}

function goOffline() {
    // Action to be performed when your application goes offline
    alert("Hey, it looks like you're offline.");
}

// Attaching event handler for the online event
window.addEventListener("online", goOnline);

// Attaching event handler for the offline event
window.addEventListener("offline", goOffline);
</script>

<p>Toggle your internet connection on/off to see how it works.</p>

The goOffline() function in the above example will be called automatically by the browser whenever the connection goes offline, whereas the goOnline() function will be called automatically by the browser when the connection status changes to online.

Check Whether Cookies Are Enabled or Not

You can use the navigator.cookieEnabled to check whether cookies are enabled in the user's browser or not. This property returns a Boolean value true if cookies are enabled, or false if it isn't.

<script>
function checkCookieEnabled() {
    if(navigator.cookieEnabled) {
        alert("Cookies are enabled in your browser.");
    } else {
        alert("Cookies are disabled in your browser.");
    }
}
</script>
 
<button type="button" onclick="checkCookieEnabled();">Check If Cookies are Enabled</button>

Detecting the Browser Language

You can use the navigator.language property to detect the language of the browser UI.

This property returns a string representing the language, e.g. "en", "en-US", etc.

<script>
function checkLanguage() {
    alert("Your browser's UI language is: " + navigator.language);
}
</script>
 
<button type="button" onclick="checkLanguage();">Check Language</button>

Getting Browser Name and Version Information

The Navigator object has five main properties that provide name and version information about the user's browser. The following list provides a brief overview of these properties:

• appName — Returns the name of the browser. It always returns "Netscape", in any browser.
• appVersion — Returns the version number and other information about the browser.
• appCodeName — Returns the code name of the browser. It returns "Mozilla", for all browser.
• userAgent — Returns the user agent string for the current browser. This property typically contains all the information in both appName and appVersion.
• platform — Returns the platform on which browser is running (e.g. "Win32", "WebTV OS", etc.)

As you can see from the above descriptions, the value returned by these properties are misleading and unreliable, so don't use them to determine the user's browser type and version.

<script>
function getBrowserInformation() {
	let info = "\n App Name: " + navigator.appName;
	   info += "\n App Version: " + navigator.appVersion;
	   info += "\n App Code Name: " + navigator.appCodeName;
	   info += "\n User Agent: " + navigator.userAgent;
	   info += "\n Platform: " + navigator.platform;

    alert("Here're the information related to your browser: " + info);
}
</script>
 
<button type="button" onclick="getBrowserInformation();">Get Browser Information</button>

Check Whether the Browser is Java Enabled or Not

You can use the method javaEnabled() to check whether the current browser is Java-enabled or not.

This method simply indicates whether the preference that controls Java is on or off, it does not reveal whether the browser offers Java support or Java is installed on the user's system or not.

<script>
function checkJavaEnabled() {
    if(navigator.javaEnabled()) {
        alert("Your browser is Java enabled.");
    } else {
        alert("Your browser is not Java enabled.");
    }
}
</script>
 
<button type="button" onclick="checkJavaEnabled();">Check If Java is Enabled</button>