How to Check Browser Type in JavaScript

by Cathlene S. Baptista

JavaScript is a client-side scripting language that can be used to alter and analyze many aspects of a visitor's session. JavaScript can be used to set and retrieve cookies, detect the user's operating system and check the user's browser type. Information retrieved using these methods can be used to deliver visitor-specific user interfaces, customize messages and interact with individual users based on their unique configuration. For example, information about the user's Web browser configuration is included in a JavaScript object named the "navigator" object.

Open a text editor and create a new file named browserCheck.html. Add the following HTML tags to the file: an open "<html>" tag, an open "<head>" tag, a close "</head>" tag, an open "<body>" tag, a close "</body>" tag and a close "</html>" tag. <html> <head></head> <body></body> </html>

Add an HTML "<div>" tag to the file between the "<body>" and "</body>" tags. This <div> element will display the browser type after detection. Give the <div> element the id "browserDisplay" and close the "</div>" tag. <html> <head></head> <body> <div id="browserDisplay"></div> </body> </html>

Add a JavaScript "<script>" tag and a JavaScript "</script>" tag after the "</div> close tag. Set the script's type value to "text/javascript". <html> <head></head> <body> <div id="browserDisplay"></div> <script type="text/javascript"> </script> </body> </html>

Declare a variable named userAgentVar inside the "<script>" and "</script>" tags and assign the variable the navigator.userAgent value. Once assigned, the userAgentVar variable contains values that include the browser's name. <html> <head></head> <body> <div id="browserDisplay"></div> <script type="text/javascript"> userAgentVar = navigator.userAgent; </script> </body> </html>

Use a JavaScript conditional statement to check for the string "Firefox" in the userAgentVar variable. The JavaScript indexOf() function returns a "-1" value if the string is not found. If the indexOf() function indicates the string "Firefox" was found in userAgentVar, set a variable named "browserText" to the text "This browser is Firefox." <html> <head></head> <body> <div id="browserDisplay"></div> <script type="text/javascript"> userAgentVar = navigator.userAgent; if (userAgentVar.indexOf("Firefox") != "-1") browserText = "This browser is Firefox."; </script> </body> </html>

Use a second JavaScript conditional statement to check for the string "MSIE" in the userAgentVar variable. The JavaScript indexOf() function returns a "-1" value if the string is not found. If the indexOf() function indicates the string "MSIE" was found in userAgentVar, set a variable named "browserText" to the text "This browser is Microsoft Internet Explorer." <html> <head></head> <body> <div id="browserDisplay"></div> <script type="text/javascript"> userAgentVar = navigator.userAgent; if (userAgentVar.indexOf("Firefox") != "-1") browserText = "This browser is Firefox."; if (userAgentVar.indexOf("MSIE") != "-1") browserText = "This browser is Microsoft Internet Explorer."; </script> </body> </html>

Use a third JavaScript conditional statement to check for the string "Safari" in the userAgentVar variable. The JavaScript indexOf() function returns a "-1" value if the string is not found. If the indexOf() function indicates the string "Safari" was found in userAgentVar, set a variable named "browserText" to the text "This browser is Safari." <html> <head></head> <body> <div id="browserDisplay"></div> <script type="text/javascript"> userAgentVar = navigator.userAgent; if (userAgentVar.indexOf("Firefox") != "-1") browserText = "This browser is Firefox."; if (userAgentVar.indexOf("MSIE") != "-1") browserText = "This browser is Microsoft Internet Explorer."; if (userAgentVar.indexOf("Safari") != "-1") browserText = "This browser is Safari."; </script> </body> </html>

Use the document.getElementById JavaScript function to set the browserDisplay <div>'s innerHTML value to the browserText variable's value. <html> <head></head> <body> <div id="browserDisplay"></div> <script type="text/javascript"> userAgentVar = navigator.userAgent; if (userAgentVar.indexOf("Firefox") != "-1") browserText = "This browser is Firefox."; if (userAgentVar.indexOf("MSIE") != "-1") browserText = "This browser is Microsoft Internet Explorer."; if (userAgentVar.indexOf("Safari") != "-1") browserText = "This browser is Safari."; document.getElementById("browserDisplay").innerHTML=browserText; </script> </body> </html>

Open browserCheck.html in Firefox, Internet Explorer and Safari. Verify the appropriate message and browser name is written to the Web page.

Tips

  • check The JavaScript navigator object can be used to determine other browsers -- for example, Opera -- or to determine a browser's version.
  • check The JavaScript navigator object has many core properties, including the user's platform, language and whether or not cookies are enabled.
  • check Most navigator objects have corresponding HTML tags.
  • check Initializing a variable to a null or default value will help in cases where no value is ultimately written to the variable.

Warning

  • close Because navigator.userAgent is typically used to detect browsers, some less commonly-used browsers may identify themselves incorrectly with this value.

Items you will need

About the Author

Cathlene S. Baptista began writing professionally in 2010, specializing in technical topics. She has also worked at McGraw-Hill as a writer and editor. Baptista holds a Bachelor of Arts in psychology from the University of Maryland and a Master of Science in information systems from George Washington University.

Photo Credits

  • photo_camera Hemera Technologies/AbleStock.com/Getty Images