How to Check Browser Type in JavaScript

Save

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.

Things You'll Need

  • Text editor
  • Firefox browser with JavaScript enabled
  • Microsoft Internet Explorer browser with JavaScript enabled
  • Safari browser with JavaScript enabled
  • 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 & Warnings

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

References

  • Photo Credit Hemera Technologies/AbleStock.com/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!