In this tutorial, you will learn about the JavaScript window 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.
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>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>
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.
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>Tip: The navigator.cookieEnabled property can basically determine whether the cookies are enabled or not before cookies in JavaScript code are created or used.
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>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:
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>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>