Introduction to Navigator in JavaScript
Navigator in JavaScript is an object that provides details about the browser that the user uses to access the web-application. As we have Document Object Model (DOM) to have control over manipulating the data, similarly, we have Browser Object Model (BOM) that provides us to with the control on how applications are viewed on the browser. Some of the entities of BOM are:
- History
- Location
- Screen
- Document
- Navigator
The JavaScript navigator object assists in customizing our application based on the user’s browser and what entities are enabled or disabled in their browser settings because we know all browsers are different from one another and handle JavaScript differently.
This article explains the BOM navigator JavaScript utilizes.
Properties of Navigator in JavaScript
JavaScript Navigator provides several methods and properties that can be used to get interesting information about the user’s browser. This can help the programmer to detect and find which functionalities our supported by the browser or not.
Now, we know that the navigator object helps in detecting what kind of browser the user has used. In this section of the article, we will discuss commonly used properties and methods of the navigator object and get some information about our browser.
The navigator object is a window property that can be accessed by
window.navigator or navigatorSince the window is a global object and is at the top of the scope chain, it can be accessed without adding the window prefix.
Table 1: Properties of Navigator Object
Below are mentioned some navigator object properties
| Property | Description |
| appCodeName | Returns the code name of the browser |
| appName | Returns the name of the browser |
| appVersion | Returns the version information of the browser |
| cookieEnabled | Determines whether cookies are enabled in the browser |
| geolocation | Returns a Geolocation object that can be used to locate the user’s position |
| language | Returns the language of the browser |
| online | Determines whether the browser is online |
| platform | Returns for which platform the browser is compiled |
| product | Returns the engine name of the browser |
| userAgent | Returns the user-agent header sent by the browser to the server |
Table 2: Methods of Navigator Object
| Method | Description |
| javaEnabled() | Specifies whether or not the browser has Java enabled |
| taintEnabled() | Removed in JavaScript version 1.2. Specifies whether the browser has data tainting enabled |
Data tainting allows one window to see the properties in another window and is removed since it proved to be a high-security risk.
Example #1
Navigator Properties and Methods
Code:
<!doctype html>
<script>
document.write("<strong>Code Name of the Browser</strong> : ",navigator.appCodeName + "<br><br>");
document.write("<strong>Name of the Browser</strong> : ",navigator.appName + "<br><br>");
document.write("<strong>Cookies Enabled</strong> : ",navigator.cookieEnabled + "<br><br>");
document.write("<strong>Platform of the Browser</strong> : ",navigator.platform + "<br><br>");
document.write("<strong>Browser in onLine Mode</strong> : ",navigator.onLine + "<br><br>");
document.write("<strong>Java Enabled</strong> : ",navigator.javaEnabled());
</script>
</html>Output:
An important point to remember is that navigator.appCodeName always results in “Mozilla” due to compatibility reasons. Also, we use Chrome, Firefox, IE11, or Safari the appName property of the navigator object will always result in “Netscape”. We also need to keep in mind that often the information returned from navigator object may be wrong or misleading since the data returned by navigator object can be changed by the user, the browser does not report new operating system that is released after the browser, different browsers can use the same name. The properties of the navigator objects are read-only property. Apart from properties and methods, the JavaScript Navigator has one more feature known as Collections.
Table 3: Collections of Navigator Object
The table below lists the collections present in the JavaScript navigator object and then we will see one example of it.
| Collection | Description |
| plugins[] | returns a reference to all the embedded objects in the document |
| mimeTypes | returns a collection of MIME types supported by the client browser |
The mime property has three predefined fields:
- name – the name of the MIME type (video/mpeg)
- description – description of the type
- suffixes – list of all possible file suffixes(extensions of file) for the MIME type.
Example #2
JavaScript Navigator Collection
Code:
<!doctype html>
<script>
var plugin = navigator.plugins["Flash Player"];
if (plugin)
document.write("Plugin Present")
else
document.write("You don't have Flash Player installed!")
</script>
</html>Output:
Example# 3
JavaScript Navigator Property – geolocation
Code:
<!DOCTYPE html>
<html>
<body>
<script>
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude + "\n" +"Longitude: " + position.coords.longitude);
}
</script>
</body>
</html>Output:
It helps to provide with user location but requires the user’s permission to share his/her location. Geolocation is much more precise for devices having GPS. This property is also read-only property.
Conclusion
We learned how to gain browser information using JavaScript and learned how its navigator object helps us to gain information like name, version, platform, etc., of the user’s browser and whether cookies are enabled or not in the user’s browser. Remember some browsers give false information just to bypass site tests.