Detect Browser with raw Javascript


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /*
  2.  * Andrew Wayne 2010
  3.  * Browser detection with javascript
  4.  * this has been passed through JSLint
  5. */
  6.  
  7. var Browser = {
  8. init: function () {
  9. // Get the browser info
  10. this.browser = this.searchString(this.dataBrowser) || "unknownBrowser";
  11. this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "unknownVersion";
  12. this.OS = this.searchString(this.dataOS) || "unknownOS";
  13. },
  14.  
  15. // search through the dataBrowser and dataOS object to find a match
  16. // for the browser name and OS respectively
  17. searchString: function (data) {
  18. var dataString, dataProp, i=0, len = data.length;
  19. for (i; i<len; i+=1) {
  20. dataString = data[i].string;
  21. dataProp = data[i].prop;
  22. this.versionSearchString = data[i].versionSearch || data[i].agent;
  23. if (dataString) {
  24. if (dataString.indexOf(data[i].subString) !== -1) {
  25. return data[i].identity;
  26. }
  27. }
  28. else if (dataProp) {
  29. return data[i].identity;
  30. }
  31. }
  32. },
  33.  
  34. // search through the userAgent to find a match
  35. // for the browser version
  36. searchVersion: function (dataString) {
  37. var index = dataString.indexOf(this.versionSearchString);
  38. if (index === -1) { return; }
  39. return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
  40. },
  41.  
  42. dataBrowser: [
  43. {
  44. string: navigator.userAgent,
  45. subString: "Chrome",
  46. agent: "Chrome",
  47. identity: "chrome"
  48. },
  49. {
  50. string: navigator.userAgent,
  51. subString: "OmniWeb",
  52. versionSearch: "OmniWeb/",
  53. agent: "OmniWeb",
  54. identity: "omniweb"
  55. },
  56. {
  57. string: navigator.vendor,
  58. subString: "Apple",
  59. agent: "Safari",
  60. identity: "safari",
  61. versionSearch: "Version"
  62. },
  63. {
  64. prop: window.opera,
  65. agent: "Opera",
  66. identity: "opera"
  67. },
  68. {
  69. string: navigator.vendor,
  70. subString: "iCab",
  71. agent: "iCab",
  72. identity: "icab"
  73. },
  74. {
  75. string: navigator.vendor,
  76. subString: "KDE",
  77. agent: "Konqueror",
  78. identity: "konqueror"
  79. },
  80. {
  81. string: navigator.userAgent,
  82. subString: "Firefox",
  83. agent: "Firefox",
  84. identity: "ff"
  85. },
  86. {
  87. string: navigator.vendor,
  88. subString: "Camino",
  89. agent: "Camino",
  90. identity: "camino"
  91. },
  92. {
  93. // for newer Netscapes (6+)
  94. string: navigator.userAgent,
  95. subString: "Netscape",
  96. agent: "Netscape",
  97. identity: "netscape"
  98. },
  99. {
  100. string: navigator.userAgent,
  101. subString: "MSIE",
  102. agent: "Explorer",
  103. identity: "ie",
  104. versionSearch: "MSIE"
  105. },
  106. {
  107. string: navigator.userAgent,
  108. subString: "Gecko",
  109. agent: "Mozilla",
  110. identity: "mozilla",
  111. versionSearch: "rv"
  112. },
  113. {
  114. // for older Netscapes (4-)
  115. string: navigator.userAgent,
  116. subString: "Mozilla",
  117. agent: "Netscape",
  118. identity: "netscape",
  119. versionSearch: "Mozilla"
  120. }
  121. ],
  122. dataOS : [
  123. {
  124. string: navigator.platform,
  125. subString: "Win",
  126. agent: "Windows",
  127. identity: "win"
  128. },
  129. {
  130. string: navigator.platform,
  131. subString: "Mac",
  132. agent: "Mac",
  133. identity: "mac"
  134. },
  135. {
  136. string: navigator.userAgent,
  137. subString: "iPhone",
  138. agent: "iPhone/iPod",
  139. identity: "iphone-ipod"
  140. },
  141. {
  142. string: navigator.platform,
  143. subString: "Linux",
  144. agent: "Linux",
  145. identity: "linux"
  146. }
  147. ]
  148. };
  149.  
  150. // Example usage
  151. Browser.init();
  152. document.write('<h1>You\'re using ' + Browser.browser + ' ' + Browser.version + ' on ' + Browser.OS + '!</h1>');

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.