Detect any browser using JavaScript

Detect any browser using JavaScript

There is a case when we want to detect a browser to handle particular feature in the application. In this article we will detect any browser using JavaScript.

JavaScript has a builtin navigator.userAgent function which is supported by almost all browsers. We can use it to detect the browsers.

The syntax is:

var w3agent = navigator.userAgent;

If we console.log the above code we will get following results in the browser’s console:

console-detect-browser

The message prints in console varies from browser to browser.

Browser Compatibility for navigator.userAgent

The navigator.userAgent is JavaScript’s native function which is supported by all browsers.

Now, lets move on the other part of article where we will detect any browser using JavaScript and to add logic to according to the specific browser.

Let’s do some JavaScript code to detect browsers:

We will use the navigator.userAgent function and encapsulate in the if conditions. The code is:

<script type="text/javascript"> 
  var w3Browser, w3UserAgent = navigator.userAgent;

  if (w3UserAgent.indexOf("Firefox") > -1) {
    w3Browser = "Mozilla Firefox";
  } 
  else if (w3UserAgent.indexOf("SamsungBrowser") > -1) {
    w3Browser = "Samsung Internet";
  } 
  else if (w3UserAgent.indexOf("Opera") > -1 || w3UserAgent.indexOf("OPR") > -1) {
    w3Browser = "Opera";
  } 
  else if (w3UserAgent.indexOf("Trident") > -1) {
    w3Browser = "Internet Explorer";
  } 
  else if (w3UserAgent.indexOf("Edge") > -1) {
    w3Browser = "Microsoft Edge";
  } 
  else if (w3UserAgent.indexOf("Chrome") > -1) {
    w3Browser = "Google Chrome or Chromium";
  } 
  else if (w3UserAgent.indexOf("Safari") > -1) {
    w3Browser = "Safari";
  } 
  else {
    w3Browser = "Unknown";
  }

  console.log("The browser is: " + w3Browser);
</script>

You can write browser’s specific logic in the scope of each if condition.

Also see how to Detect Internet Explorer and display warning message.

The PHP method

We can also detect a browser by using PHP. The code is:

<?php
  echo $_SERVER['HTTP_USER_AGENT'] . "\n\n";
  $browser = get_browser(null, true);
  print_r($browser);
?>

The output is similar to as below:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040803 Firefox/0.9.3

Array
(
    [browser_name_regex] => ^mozilla/5\.0 (windows; .; windows nt 5\.1; .*rv:.*) gecko/.* firefox/0\.9.*$
    [browser_name_pattern] => Mozilla/5.0 (Windows; ?; Windows NT 5.1; *rv:*) Gecko/* Firefox/0.9*
    [parent] => Firefox 0.9
    [platform] => WinXP
    [browser] => Firefox
    [version] => 0.9
    [majorver] => 0
    [minorver] => 9
    [cssversion] => 2
    [frames] => 1
    [iframes] => 1
    [tables] => 1
    [cookies] => 1
    [backgroundsounds] =>
    [vbscript] =>
    [javascript] => 1
    [javaapplets] => 1
    [activexcontrols] =>
    [cdf] =>
    [aol] =>
    [beta] => 1
    [win16] =>
    [crawler] =>
    [stripper] =>
    [wap] =>
    [netclr] =>
)

You can use PHP arrays functions to take the indexes of particular object. The values returned from the array index, used to detect the browsers.

Related Posts