JavaScript: How to identify the browser using navigator.userAgent

/ Chris Nielsen

While it is not a good programming practice to code workarounds for various browsers and versions , it is helpful to know how to detect the user’s browser. For example:

Here is the complete HTML code that includes JavaScript that will detect the user’s browser and other information such as operating system:

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
  body {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
  }
</style>
</head>
<body onload="reset()">

<h3>Identify Browser</h3>

<SCRIPT LANGUAGE="JavaScript">
function returnBrowser() {
  var user_details = navigator.userAgent
  var browser = "Your browser is...<br><br>appName: <i>" + navigator.appName + '</i>'
  var text = 'Note: "Netscape" is the JavaScript application name for all of these browsers: <ul><li>Chrome <li>Firefox <li>IE11 <li>Safari</ul>'
  var reset_button = '<input type="button" value="Reset" onClick="reset()"/>'
  var replace_html = browser + '<br>userAgent: ' + user_details + '<br><br>' + text + reset_button
  document.getElementById("brwsr").innerHTML = replace_html
}

function reset() {
  var text = 'What is your browser?'
  var button = '<button type="button" onclick="returnBrowser()">Identify Browser</button>'
  var replace_html = text + '<br><br>' + button
  document.getElementById("brwsr").innerHTML = replace_html
}
</SCRIPT>

<p id="brwsr"></p>

</body>
</html>

Some key pieces of this are navigator.appName for detecting the browser family, and navigator.userAgent for detecting other information such as the OS and specific browser type. This code also uses onload to launch the reset function for the initial state. For example:

<body onload="reset()">

For information about other navigator object properties, see this website.

Leave a Reply