Wednesday, 30 August 2017

How to Find / Detect Browser using Javascript

Many time we want to write browser specific code.For that we have to detect the browser so that we can apply particular settings for that browser.
This can be done using javascript.
Bellow is the javascript which can be used.
var BrowserDetect = {
 init: function () {
  this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  this.version = this.searchVersion(navigator.userAgent)
   || this.searchVersion(navigator.appVersion)
   || "an unknown version";
  this.OS = this.searchString(this.dataOS) || "an unknown OS";
 },
 searchString: function (data) {
  for (var i=0;i<data.length;i++) {
   var dataString = data[i].string;
   var dataProp = data[i].prop;
   this.versionSearchString = data[i].versionSearch || data[i].identity;
   if (dataString) {
    if (dataString.indexOf(data[i].subString) != -1)
     return data[i].identity;
   }
   else if (dataProp)
    return data[i].identity;
  }
 },
 searchVersion: function (dataString) {
  var index = dataString.indexOf(this.versionSearchString);
  if (index == -1) return;
  return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
 },
 dataBrowser: [
  {
   string: navigator.userAgent,
   subString: "Chrome",
   identity: "Chrome"
  },
  {  string: navigator.userAgent,
   subString: "OmniWeb",
   versionSearch: "OmniWeb/",
   identity: "OmniWeb"
  },
  {
   string: navigator.vendor,
   subString: "Apple",
   identity: "Safari",
   versionSearch: "Version"
  },
  {
   prop: window.opera,
   identity: "Opera",
   versionSearch: "Version"
  },
  {
   string: navigator.vendor,
   subString: "iCab",
   identity: "iCab"
  },
  {
   string: navigator.vendor,
   subString: "KDE",
   identity: "Konqueror"
  },
  {
   string: navigator.userAgent,
   subString: "Firefox",
   identity: "Firefox"
  },
  {
   string: navigator.vendor,
   subString: "Camino",
   identity: "Camino"
  },
  {  // for newer Netscapes (6+)
   string: navigator.userAgent,
   subString: "Netscape",
   identity: "Netscape"
  },
  {
   string: navigator.userAgent,
   subString: "MSIE",
   identity: "Explorer",
   versionSearch: "MSIE"
  },
  {
   string: navigator.userAgent,
   subString: "Gecko",
   identity: "Mozilla",
   versionSearch: "rv"
  },
  {   // for older Netscapes (4-)
   string: navigator.userAgent,
   subString: "Mozilla",
   identity: "Netscape",
   versionSearch: "Mozilla"
  }
 ],
 dataOS : [
  {
   string: navigator.platform,
   subString: "Win",
   identity: "Windows"
  },
  {
   string: navigator.platform,
   subString: "Mac",
   identity: "Mac"
  },
  {
      string: navigator.userAgent,
      subString: "iPhone",
      identity: "iPhone/iPod"
     },
  {
   string: navigator.platform,
   subString: "Linux",
   identity: "Linux"
  }
 ]

};
BrowserDetect.init();

navigator.vendorSub = 
navigator.productSub = 20030107
navigator.vendor = Google Inc.
navigator.maxTouchPoints = 0
navigator.hardwareConcurrency = 2
navigator.cookieEnabled = true
navigator.appCodeName = Mozilla
navigator.appName = Netscape
navigator.appVersion = 5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
navigator.platform = Win32
navigator.product = Gecko
navigator.userAgent = Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
navigator.language = en-US
navigator.languages = en-US,en,hi,ru
navigator.onLine = true
navigator.doNotTrack = null
navigator.geolocation = [object Geolocation]
navigator.mediaDevices = [object MediaDevices]
navigator.plugins = [object PluginArray]
navigator.mimeTypes = [object MimeTypeArray]
navigator.webkitTemporaryStorage = [object DeprecatedStorageQuota]
navigator.webkitPersistentStorage = [object DeprecatedStorageQuota]
navigator.serviceWorker = [object ServiceWorkerContainer]
navigator.getBattery = function getBattery() { [native code] }
navigator.sendBeacon = function sendBeacon() { [native code] }
navigator.getGamepads = function getGamepads() { [native code] }
navigator.webkitGetUserMedia = function webkitGetUserMedia() { [native code] }
navigator.javaEnabled = function javaEnabled() { [native code] }
navigator.vibrate = function vibrate() { [native code] }
navigator.requestMIDIAccess = function requestMIDIAccess() { [native code] }
navigator.budget = [object BudgetService]
navigator.permissions = [object Permissions]
navigator.presentation = [object Presentation]
navigator.getUserMedia = function getUserMedia() { [native code] }
navigator.registerProtocolHandler = function registerProtocolHandler() { [native code] }
navigator.unregisterProtocolHandler = function unregisterProtocolHandler() { [native code] }
navigator.credentials = [object CredentialsContainer]
navigator.storage = [object StorageManager]
navigator.requestMediaKeySystemAccess = function () { [native code] }

No comments:

Post a Comment

React Hooks - custom Hook

  v CustomHook Ø React allows us to create our own hook which is known as custom hook. Example – 1 localStorage Demo Step-1 Create ...