JS Navigator

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

The Navigator Object

The navigator property of a window is known as window.navigator is a reference to a Navigator object. it is a read-only property containing information about the user's browser.

Since Window is said to be a global object and is located at the top of the scope chain, the properties of the Window object such as ‘window.navigator’ can be accessed without window. prefix, for instance, window.navigator.language can be written or displayed as ‘navigator.language’.

In the following section, you will be shown how to get different information about the user's browser.
 

Detect Whether the Browser is Online or Offline

You can detect whether the browser or application is online or offline by using the navigator.onLine property. This property returns a Boolean value true meaning or false meaning online and offline respectively.Connection Status</button>

<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>

Try with example

When a connection is established or lost browser fires online and offline events. Handler functions can be attached to these events to customize your application for online and offline scenarios or events.

The following JavaScript code shows how this method 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>

Try with example

In the above example, the goOffline() function will be automatically called by the browser anytime the connection goes offline, while the goOnline() function will be called automatically by the browser when the connection status changes to online. 

Check Whether Cookies Are Enabled or Not

The navigator.cookieEnabled checks whether cookies are enabled in the user's browser or not. If cookies are enabled, this property returns a Boolean value true or false if it isn't enabled.

<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>

Try with example

Tip: The navigator.cookieEnabled property can basically determine whether the cookies are enabled or not before cookies in JavaScript code are created or used.

Detecting the Browser Language

The navigator.language property is useful as it detects the language of the browser UI.

This property returns a string and represents the language as, e.g. ‘en’, ‘en-US’, and so on.

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

Try with example

Getting Browser Name and Version Information

The Navigator object consists of five basic properties that provide name and version information concerning the user's browser. The following list provides a brief definition of these properties:

• appName: This property always returns the name ‘Netscape’, in any browser.
• appVersion: This property returns the version number and other information about the browser.
• appCodeName: This property unlike appName, returns the code name 'Mozilla' for all browsers.
• userAgent: This property typically contains all the information in both appName and appVersion and returns the user agent string for the current browser.
• Platform: This property returns the platform on which the browser is running, for instance, 'Win32', 'WebTV OS', and so on.

As demonstrated from the above descriptions, the value returned by these properties can’t be used to determine the user's browser type and version because they are misleading and unreliable.

<script>
function getBrowserInformation() {
	var 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>

Try with example

Check Whether the Browser is Java Enabled or Not

The method javaEnabled() can be used to check if the current browser is either Java-enabled or not.

This method doesn’t reveal whether the browser offers Java support or Java is installed on the user's system or not but rather indicates whether the preference that controls Java is on or off.

<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>

Try with example