Javascript Tutorial -- Detecting Browser Type

If you've been reading through these tutorials in order, then you've covered a lot of material at this point. If you compare the example from Lesson 1 with the example from Lesson 9 you'll notice that the example scripts have grown a lot more complicated as we've progressed, and that the later examples build on a lot of the concepts from the earlier lessons. Despite the increasing complexity in the examples so far, everything up to this point has been relatively straightforward -- there have not been any gotchas or caveats other than what you would normally expect from any programming language.

However, now I'm about to throw a nasty wrinkle at you -- although all of the things we have learned so far should work in any recent web browser, not all features in Javascript are supported by all popular web browsers. Javascript was a Netscape invention, and Microsoft and Netscape have not always played well together, so Internet Explorer does not implement all of the features that Netscape implements, and vice versa. Then, of course, there are the Mozilla/Firefox browsers, there is Safari for Mac users, there is Opera, and for the *nix crowd, there is Konqueror, Epiphany, Galleon, etc., etc., etc. As if that were not bad enough, there are also the text-only browsers like Lynx and Links, and there are the users who have disabled Javascript on their browsers due to security concerns. This brings up a very big problem: how do you write scripts that support all (or at least most) of these browsers?

All is not lost, however. Javascript has a solution for this problem, as well. The answer, if you haven't guessed already, is to use Javascript to detect what type of browser is viewing the HTML document, and to react accordingly. Javascript contains an object called "navigator" that stores information about the type of browser used to view the HTML document. Originally introduced by Netscape (thus the "navigator" moniker), even Internet Explorer implements the navigator object. One of the methods of the navigator object is called "appName" and it returns the browser type. Here is how you use it:

        <script type="text/javascript">
          <!--
            var BrowserType = navigator.appName

            document.write("You are using " + BrowserType)
          //-->
        </script>
      

Now the bad news: due to a lot of infighting between Microsoft and Netscape back in the day, the navigator.appName method often doesn't return the information you might expect. About the only way to be sure what browser will work with your scripts is to test them with every browser you can get your hands on. At the very least, as of 2007, I would recommend tesing with IE 6 and 7, Mozilla/Firefox, and if at all possible, Safari. If you can, you should test with Opera as well, since it seems to be gaining in popularity and you might want to include the latest versions of Netscape, too.

Once you've determined what browser type(s) you need to test for, and what the appName method returns for each browser, you can use an if statement to branch to different functions in your script -- or even to different web pages entirely -- to handle the differences in browser type. It's a PITA, but well worth the effort if there is some kind of functionality that you wish to include that doesn't work well in all browsers, and if your web logs show that your visitors use more than one type of web browser. YMMV, so use your own judgement on how to handle these cases.

Here is how the test script above looks on the web.