Here is how to detect the browser, the version and subversion of either Netscape(NN) or Microsoft(IE) browsers. Since other browsers count for less than 5% they are not addressed here. The code to address all possible browsers is huge and changes daily. Companies like BrowserHawk make their income with software to handle all the variations of browsers... Got the idea? To make things worse some of the 5% say they are Netscape or Microsoft anyway. I have considered adding Opera and WebTV but the numbers just don't justify it. An example of redirecting pages using JavaScript is also provided.
Why, why why?... Both Microsoft and Netscape have decided to "change" the way they report things as of version 5. Not for the better mind you, just to mess with us. Special code has to be implemented to detect these newer versions. NN6 reports as version 5, IE5 and IE6 report as version 4. I understand why IE had to change... but Netscape... not sure. All this for something that should be standards driven, "appVersion" has lost what little standards it had.
Detect the browser:
Detecting the browser is very easy. Here is JavaScript code that will work in both browsers. I use "indexOf" in case of name changes in future. You can check the browser by referencing the variable "browser". Alternately you could execute some code instead of setting "browser" variable.
<script type="text/javascript"> <!-- if (navigator.appName.indexOf("Netscape")!=-1){ browser = "NN"; } else { if (navigator.appName.indexOf("Internet Explorer")!=-1){ browser = "IE"; } else { // unknown browser browser = "UN" } } // --> </script>
Detect the Version:
This was an easy 2 line script. IE5 and NN6 both mess this up. IE5 and IE6 report as version 4, NN6 reports as version 5. Here is the JavaScript code that works for both browsers. Notice the special lines added for IE5 and NN6. You can check the version by referencing "browserver".
<script type="text/javascript"> <!-- tv = navigator.appVersion browserver = tv.substring(0,tv.indexOf(".")) // required for NN6 if (browserver == 5) browserver = 6 // required for IE5+ bv=tv.indexOf("MSIE") if ( bv!= -1) {browserver = tv.substring(bv+5,bv+6)} //--> </script>
Detect the Sub Version:
This requires a little more effort. And guess what....IE5 and NN6 do not report this properly. I have not added code for them here. Many browser versions do not report a two digit sub version as is standard. Some add stuff(like "Gold"). So there really isn't a standard for you to work with. This code will remove any added junk and return a two digit sub version no matter what. This means that a version 3.1 will report a sub version of "01" while 3.10 will report sub version of "10". The only time I ever use sub version is when IE3.02 is involved(it removed functions). you can check the browser sub version by referencing "browsersubver".
<script type="text/javascript"> <!-- tv = navigator.appVersion browsersubver = tv.substring(tv.indexOf(".")+1,tv.indexOf("(")-1); browsersubver = parseInt(browsersubver); // done this way because parseint will remove leading 0's if (browsersubver < 10){browsersubver = "0" + browsersubver} //--> </script>
Put it all together
Now to put all above together to detect different versions and browsers then redirect more advanced browsers to different pages. Just drop this code into your page and modify as required. The page you put this into should support all browsers just in case JavaScript is not available.
Notice I put the alert message after loading new page? It allows page to load while client is busy with message rather than waiting for client to respond to the message(helpful hint).
<script type="text/javascript"> <!-- always comment code out for non supported browsers. if (navigator.appName.indexOf("Netscape")!=-1){ browser = "NN"; } else { if (navigator.appName.indexOf("Microsoft")!=-1){ browser = "IE"; } else { // unknown browser browser = "UN" } } tv = navigator.appVersion browserver = tv.substring(0,tv.indexOf(".")); if (browserver == 5) browserver = 6 bv=tv.indexOf("MSIE") if ( bv!= -1) {browserver = tv.substring(bv+5,bv+6)} browsersubver = tv.substring(tv.indexOf(".")+1,tv.indexOf("(")-1); browsersubver = parseInt(browsersubver); if (browsersubver < 10){browsersubver = "0" + browsersubver} // now redirect based on browser and version. You will have to adjust // this code to your requirements. At least where to redirect. if (browser == "IE" & browserver == 3 & browsersubver == 02) { document.location.href = "#Ihateie302"; alert("Argh...the dreaded version 3.02 of IE! Please upgrade."); return true; } if (browserver >= 5) { document.location.href = "#newest_stuff"; if (browser=="IE"){ alert("Explorer is the best browser for this site!"); } else { alert("Great, you are using the new version of Netscape."); } return true; } else { document.location.href = "#basic_stuff"; alert("You should really upgrade to the new Internet Explorer!"); return true; } //--> </script>
I set "browser", "browserver" and "browsersubver" variables on one main page and reference them. Thus I do not have to repeat this code. On the CGI site this was done using CGI, not script.
Anyway, I hope this helps those that want it.