WINDOW NAVIGATOR JAVASCRIPT

❮ Prev Next ❯

Javascript BOM : Navigator Object

The Javascript Navigator is an object of window interface, it provides information about the web browser and its capabilities.

The Navigator object can be accessed using window.navigator or simply navigator because window is a global object.

The types of information that can be retrieved using navigator objects are :

Weather user is online
Operating user is using (platform)
Browser user is using
Browser Version
Weather Cookies are enabled or not
Browser Language
And many more...

javascript detect online offline

We can check the internet connection status of the browser and can tell whether the browser is online or offline.

To check the online status of browsers use navigator.online, it returns boolean value. It will return true if the user is online and false if the user is offline.

Note: navigator.online is not trustable, in some cases it always returns true. Refer MDN for browser compatibility

function check(){
  var onlineStatus = navigator.onLine;
  if (onlineStatus) {
    document.getElementById("output").innerHTML = "Browser is online";
  }
  else {
    document.getElementById("output").innerHTML = "Browser is offline";
  }
}

▶ Run the code

Detect Operating System in Javascript

To get the operating system of a user you can use platform as well as appVersion. Both properties result in the operating system of the user in different formats.

Don't rely on these properties to always return the correct result.

<button onclick="check()">Check Operating System</button>

<script>
  function check() {
    var os_by_appVersion = navigator.appVersion;
    var os_by_platform = navigator.platform;
    document.getElementById("output").innerHTML = "OS by appVersion property :" + os_by_appVersion + "<br> OS by platform property : " + os_by_platform;
  }
</script>

▶ Run the code

Get Browser Name and Version using Javascript

Using the navigator object we can access many information related to the browser.

appName - Returns name of browser
appCodeName - Returns code name of the browser
userAgent - Returns user agent string for current browser. It includes all information regarding browser and operating system

function check() {
  var appname = navigator.appName;
  var appcodename = navigator.appCodeName;
  var user_agent = navigator.userAgent;
  document.getElementById("output").innerHTML = "App name : " + appname + "
 App code Name : " + appcodename + "
 User Agent information : "+ user_agent;
}

▶ Run the code

Check Cookie Enabled Javascript

To check whether cookie is enabled or not use cookieEnabled property. It returns boolean value true if cookie is enabled and false if cookie is disabled.

function check() {
  var cookie = navigator.cookieEnabled;
  if (cookie) {
    document.getElementById("output").innerHTML = "Cookie is Enabled";
  }
  else {
    document.getElementById("output").innerHTML = "Cookie is Disabled";
  }
}

▶ Run the code

Check Language

To get the language of a webpage use the language property of the navigator object. While there is another property languages which returns value in array.

function check() {
  var lang = navigator.language;
  var langs = navigator.languages;
  document.getElementById("output").innerHTML = "navigator.language - " + lang + "
 navigator.languages : 
";
  for (let i = 0; i < langs.length; i++) {
    document.getElementById("output").innerHTML += langs[i] + "
";
  }
}

▶ Run the code

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

❮ Prev Next ❯