Browser Recognition How-to

While working on our group project we encountered some issues when dealing with different browsers, this is fairly commonplace in the word of web development. I know some of you have already stumbled into errors when working with different browsers, and for those of you who haven’t yet, you will most likely sooner rather than later. As we have learned from the “Head First Ajax” book the various browsers available to us and the general public do not all follow the same standards or guidelines. Many have communized among themselves, while some, Microsoft in particular tends to handle certain tasks in their own way.

This is not one browser or another handles events better or worse, it simply came about during their early creation and these companies now have a lot invested in the way their browser operates that it would be quite expensive and difficult for them to suddenly change the ways they have been operating for over 10 years. And this would lead to the argument of whose methods are correct? And lately we are seeing the advent of mobile browsers from even more companies all of which are using their own practices, further complicating the matter.

We as skilled programmers need be prepared for the large majority of browser users and create programs that can adapt to the various browsers with no noticeable different in operation to the end user. But how do we do that? I am going to show you some very simply code to check for the type of browser being used. The javascript command we need is “navigator.appName” command. The navigator command returns to us the browsers identification and the appName gives us the browser name. Note: sometimes the more powerful userAgent command needs to be used, as some browsers return the incorrect name, such as with Safari, it will return “Netscape.” The userAgent command can be a little harder to parse, as it returns the complete browser identification string. You would apply this in conjunction with an IF/Then or case statement command to run selected code that is appropriate for the browser currently being used.

Here is a simply javascript function that simply pops an alert message box telling you what type of browser is currently being used when it is ran.

This check only will respond to "WebTV", any of the netscape browsers, or Internet Explorer, and is not ment to be an exhaustive list, just a small example you can expand on.

I utilized the simply appName command for our group project in relation to the cascading dropboxes, as the dynamic list utilizes an array, and the Firefox browser starts the count at 0, and Internet Explorer starts the count at 1. This was causing an error, and after some research and additions script and adjusting of the script it works well in either browser. It is a little long/difficult to explain, so if you would like a further explanation or more detail feel free to ask me in class.


Here is a working example with the javascript included in the HTML page, simply veiw the sourcecode and feel free to use.