JS Window Navigator

Previous Page Next Page

The Navigator Object

The navigator property of a window (window.navigator) refers to a Navigator object, which is a read-only property containing information about the user's browser.

Because Window is a global object at the top of the scope chain, properties of the Window object like window.navigator can be accessed without the window. prefix. For instance, window.navigator.language can simply be written as navigator.language.

The next section will demonstrate how to retrieve various information about the user's browser.

Determining Online or Offline Status of the Browser

You can utilize the navigator.onLine property to determine whether the browser (or application) is currently online or offline. This property returns a Boolean value: true for online or false for offline.

Example

Try this code »

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

The browser triggers online and offline events when a connection is established or lost. You can attach handler functions to these events to customize your application for online and offline scenarios.

Take a look at the following JavaScript code to understand how this functionality operates:

Example

Try this code »

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

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

Checking if Cookies Are Enabled

You can utilize the navigator.cookieEnabled property to determine whether cookies are enabled in the user's browser. This property returns a Boolean value: true if cookies are enabled, or false if they are not.

Example

Try this code »

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

Tip: Before creating or using cookies in your JavaScript code, it's advisable to check the navigator.cookieEnabled property to confirm whether cookies are enabled in the user's browser.

Detecting the Browser Language

You can utilize the navigator.language property to determine the language of the browser's user interface.

This property returns a string that represents the language, such as "en" for English, "en-US" for American English, etc.

Example

Try this code »

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

<button type="button" onclick="checkLanguage();">Check Language</button>

Obtaining Browser Name and Version Information

The Navigator object includes five primary properties that provide information about the name and version of the user's browser. Here's a brief overview of these properties:

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

However, it's important to note that the values returned by these properties can be misleading and unreliable. Therefore, avoid using them to determine the user's browser type and version.

Example

Try this code »

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

Checking Java Availability in the Browser

You can use the javaEnabled() method to determine if the current browser supports Java.

This method indicates whether the preference controlling Java is enabled or disabled. It does not confirm whether the browser actually supports Java or whether Java is installed on the user's system.

Example

Try this code »

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

Previous Page Next Page