{"id":839,"date":"2017-11-13T16:50:02","date_gmt":"2017-11-13T21:50:02","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=839"},"modified":"2021-01-17T21:19:29","modified_gmt":"2021-01-18T02:19:29","slug":"javascript-how-to-use-the-navigator-object-to-identify-the-browser","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/11\/13\/javascript-how-to-use-the-navigator-object-to-identify-the-browser\/","title":{"rendered":"JavaScript: How to identify the browser using navigator.userAgent"},"content":{"rendered":"\n<p>While it is not a good programming practice to code workarounds for various browsers and versions , it is helpful to know <em>how&nbsp;<\/em>to detect the user&#8217;s browser. For example:<\/p>\n\n\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" name=\"iframe_demo\" src=\"https:\/\/bluegalaxy.info\/js\/identify_browser.html\" scrolling=\"no\" width=\"100%\" height=\"360\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n\n\n\n<p><\/p>\n\n\n\n<p>Here is the complete HTML code that includes JavaScript that will detect the user&#8217;s browser and other information such as operating system:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\">\n&lt;style>\n  body {\n      font-family: 'Roboto', sans-serif;\n      font-size: 16px;\n  }\n&lt;\/style>\n&lt;\/head>\n&lt;body onload=\"reset()\">\n\n&lt;h3>Identify Browser&lt;\/h3>\n\n&lt;SCRIPT LANGUAGE=\"JavaScript\">\nfunction returnBrowser() {\n  var user_details = navigator.userAgent\n  var browser = \"Your browser is...&lt;br>&lt;br>appName: &lt;i>\" + navigator.appName + '&lt;\/i>'\n  var text = 'Note: \"Netscape\" is the JavaScript application name for all of these browsers: &lt;ul>&lt;li>Chrome &lt;li>Firefox &lt;li>IE11 &lt;li>Safari&lt;\/ul>'\n  var reset_button = '&lt;input type=\"button\" value=\"Reset\" onClick=\"reset()\"\/>'\n  var replace_html = browser + '&lt;br>userAgent: ' + user_details + '&lt;br>&lt;br>' + text + reset_button\n  document.getElementById(\"brwsr\").innerHTML = replace_html\n}\n\nfunction reset() {\n  var text = 'What is your browser?'\n  var button = '&lt;button type=\"button\" onclick=\"returnBrowser()\">Identify Browser&lt;\/button>'\n  var replace_html = text + '&lt;br>&lt;br>' + button\n  document.getElementById(\"brwsr\").innerHTML = replace_html\n}\n&lt;\/SCRIPT>\n\n&lt;p id=\"brwsr\">&lt;\/p>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p>Some key pieces of this are <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">navigator.appName<\/code> for detecting the browser family, and <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">navigator.userAgent<\/code> for detecting other information such as the OS and specific browser type. This code also uses <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">onload<\/code> to launch the reset function for the initial state. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body onload=\"reset()\"><\/pre>\n\n\n\n<p>For information about other navigator object properties, see <a href=\"http:\/\/www.javascriptkit.com\/javatutors\/navigator.shtml\">this website<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While it is not a good programming practice to code workarounds for various browsers and versions , it is helpful to know how&nbsp;to detect the user&#8217;s browser. For example: Here is the complete HTML code that includes JavaScript that will detect the user&#8217;s browser and other information such as operating system: Some key pieces of &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/11\/13\/javascript-how-to-use-the-navigator-object-to-identify-the-browser\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: How to identify the browser using navigator.userAgent<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[45],"class_list":["post-839","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-javascript"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=839"}],"version-history":[{"count":15,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/839\/revisions"}],"predecessor-version":[{"id":3363,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/839\/revisions\/3363"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}