JavaScript

Navigator Object in JavaScript | Explained

In JavaScript, the “navigatorobject comprises the information about the current browser that the user is using to access a web application. You may know that all browsers are different, and they process JavaScript differently. In such a scenario, the navigator object helps in customizing your application according to the user’s browser settings.

The JavaScript navigator object permits you to use the location information to get details related to the user’s current location. Its other useful properties assist in knowing about the browser name, its version, browser engine or product name, and the browser’s language. In short, your website will be more compatible with different browsers if you utilize the navigator object properties correctly.

This write-up will explain the navigator object in JavaScript, its properties, and methods with the help of suitable examples. So, let’s start!

Navigator Object in JavaScript

As mentioned earlier, the Navigator Object in JavaScript is used to retrieve browser-related information. It is a window property that can be accessed using:

window.navigator

OR

navigator

The navigator object offers various properties and methods that help the programmers determine the features provided by the browser. Follow this post to learn the commonly used navigator object properties and methods if you have the same motive.

Navigator Object appCodename property in JavaScript

The “appCodename” property of the JavaScript navigator object displays the browser code name.

Syntax of Navigator Object appCodename property in JavaScript

navigator.appCodeName

Example: Navigator Object appCodename property in JavaScript

In the below-given, the variable “browserCodeName” will store the browser code name returned by the “navigator.appCodeName” property:

let browserCodeName = navigator.appCodeName;

console.log("Browser code name is : " + browserCodeName);

As you can see from the output, our browser code name is “Mozilla”:

Navigator Object appName property in JavaScript

The “appName” property of the navigator object returns the browser’s name.

Note: All modern browsers will display “Netscape” as the appName navigator object property value.

Syntax of Navigator Object appName property in JavaScript

navigator.appName

Example: Navigator Object appName property in JavaScript

Now, we will retrieve the value of the “appName” property of the navigator object:

let browserName = navigator.appName;

console.log("Browser Name: " + browserName);

Output

Navigator Object appVersion property in JavaScript

If you want to know about the version of your current browser, then you can use the “appVersion” property of the JavaScript navigator object.

Syntax of Navigator Object appVersion property in JavaScript

navigator.appVersion

Example: Navigator Object appVersion property in JavaScript

In the following example, the value of the “navigator.appVersion” will be stored in the variable “version,” which is then displayed in the console with the help of the “console.log()” method:

let version =  navigator.appVersion;

console.log("Browser version: " + version);

The below-given output shows our browser’s version:

Navigator Object cookieEnabled property in JavaScript

The Navigator object “cookiesEnabled” property is used to check if the cookies are enabled in the browser or not.

Syntax of Navigator Object cookieEnabled property in JavaScript

navigator.cookieEnabled

If cookies are enabled in the browser, the navigator.cookieEnabled property will return “true“; otherwise, the return case will be set to “false” if cookies are disabled.

Example: Navigator Object cookieEnabled property in JavaScript

We will check out the status of our browser’s cookies by using the “navigator.cookieEnabled” property:

let cookies = navigator.cookieEnabled;

console.log("Cookies enabled: " + cookies);

Given output signifies that cookies are enabled in our browser:

Navigator Object geolocation property in JavaScript

In JavaScript, the “geolocation” property of a navigator object returns a “Geolocation” object which permits you to provide the location-related information like the current position of the user.

Syntax of Navigator Object geolocation property in JavaScript

navigator.geolocation

Example: Navigator Object geolocation property in JavaScript

The navigator object “geolocation” property asks you to grant permission for getting the location. In case of fulfilling the request, it will return a “Geolocation” object and this object can be used to perform further operations.

In our program, firstly we will access the Geolocation API using the “navigator.geolocation” property, if this operation get succeeded, then the specified property will invoke the “getCurrentPositions()” Geolocation object method while passing “showPosition()” as an argument, otherwise, the code written in the “else” block will be executed:

if (navigator.geolocation) {

  navigator.geolocation.getCurrentPosition(showPosition);

} else {

console.log("Geolocation is not supported by this browser.");

}

After permitting the location access by the user, showPosition() function will perform its functionality and display the position of current device according to the “Latitude” and “Longitude” values:

function showPosition(position) {

  console.log( "Latitude: " + position.coords.latitude + " " +

  " Longitude: " + position.coords.longitude);

}

To get to know about our current position, we will allow the location access for the Geolocation API:

After doing so, the “Latitude” and “Longitude” values will be shown in the console window within a few microseconds:

Navigator Object navigator.language property in JavaScript

The “navigator.language” property of the navigator object will fetch the current language of the browser.

Syntax of Navigator Object navigator.language property in JavaScript

navigator.language

If the browser is online, the “navigator.language” will return “true“; otherwise, its return case is set to “false” when the browser is offline.

Example: Navigator Object navigator.language property in JavaScript

Execute below-given code to check your browser’s language:

let language = navigator.language;

console.log( "Browser language: " + language);

The language of our browser is set to the English-United States; that’s why the string “en-US” is displayed as output:

Navigator Object navigator.onLine property in JavaScript

navigator.onLine” is another useful property of the navigator object, which verifies if the browser is online or not.

Syntax of Navigator Object navigator.onLine property in JavaScript

navigator.onLine

Example: Navigator Object navigator.onLine property in JavaScript

To check the current status of your browser, type out the following code in the console window:

let online = navigator.onLine;

console.log("Browser online: " + online);

true” represents that your browser is online, whereas “false” indicates that the browser is not currently active (offline):

Navigator Object navigator.platform property in JavaScript

The “navigator.platform” property of a JavaScript object identifies the platform on which your browser is running.

Syntax of Navigator Object navigator.platform property in JavaScript

navigator.platform

Example: Navigator Object navigator.platform property in JavaScript

let platform = navigator.platform;

console.log("Platform: " + platform);

The above-given program will output the platform for which the browser is compiled:

Navigator Object navigator.product property in JavaScript

In JavaScript, the “navigator.product” property of a navigator object is accessed to view the browser engine or product name.

Syntax of Navigator Object navigator.product property in JavaScript

navigator.product

Example: Navigator Object navigator.product property in JavaScript


Because of some compatibility reasons, modern browsers display “Gecko” as their product name when the “navigator.product” property is accessed:

let browserProduct = navigator.product;

console.log("Browser product: " + browserProduct);

Output

Navigator Object navigator.userAgent property in JavaScript

The browser sends the headers of the user-agent to the server and they can be fetched using “navigator.userAgent” property.

Syntax of Navigator Object navigator.userAgent property in JavaScript

navigator.userAgent

Example: Navigator Object navigator.userAgent property in JavaScript

To get the information stored in the user-agent header, we will invoke the “user-agent” property of the navigator object:

let agent = navigator.userAgent;

console.log("User-agent: " + agent);

The header user-agent header provides the information related to the browser platform, its name, version number:

Navigator Object javaEnabled() method in JavaScript

Is “Java” enabled in your browser? Utilize the “javaEnabled()” navigator object method for getting the answer to the specified question.

Syntax of Navigator Object javaEnabled() method in JavaScript

navigator.javaEnabled()

Example: Navigator Object javaEnabled() method in JavaScript

The “javaEnabled()” method will return a boolean value either true or false, where “true” represents that Java is enabled and “false” indicates that Java is disabled:

let java = navigator.javaEnabled();

console.log( "Java Enabled: " + java);

Output

We have compiled the essential information related to the Navigator Object in JavaScript.

Conclusion

Navigator object in JavaScript is referred to as “navigator” or “window.navigator“. It contains information about the browser and its capabilities. The JavaScript navigator object offers several useful properties and methods that fetch the details related to the browser, such as browser name, its version, browser engine or product name, and the browser’s language. This write-up explained the navigator object in JavaScript with the help of suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.