|
Javascript; Browser Detection and Page Redirection
|
By William J. Tolson
[Hits: 11520]
|
|
A recent project was developed using Internet Explorer 5.5 asthe browser of choice. Aware of browser incompatibilities,viewing the web page using three other commonly used browsers,Internet Explorer 4.0, Netscape Navigator 6.1, and NetscapeNavigator 4.7 revealed some 'distortions'. This was mainly dueto whether or not a particular browser could interpret stylesheets, and if so how the style sheets were interpreted.
It was apparent that the page code either needed to bedowngraded to the 'lowest common denominator' or alternativeversions of the web page were needed for Netscape 6.1, Netscape4.7, and Internet Explorer 4.0. Therefore, a version optimizedfor Netscape 6.1 was created, as well as another versioncompatible for both Netscape 4.7 and Internet Explorer 4.0.(This was before Internet Explorer 6.0 and Netscape 6.2 wereavailable.)
Review of several current web sites and textbooks on Javascriptpresented different approaches to writing script to first detecta user's browser, and then depending on the browser and version,to redirect the user to a specific page. In this particularcase, none of the recommendations or solutions were what wasneeded. After a good deal of testing and re-testing, thefollowing script examples were assembled.
Below are five different examples / variations of someJavascript that is to be placed on a page that is optimized forInternet Explorer 5.5. These scripts will then automaticallydetect the visitor's browser and version, and then automaticallydirect the particular browser in one of three directions. Theyare;
If a visitor is using Internet Explorer 5.5, to remain on thecurrent page.
If a visitor is using Netscape 6.1, to be redirected to a pagethat has been optimized for Netscape 6.1.
If a visitor is using Internet Explorer 4.0 or Netscape 4.7, tobe redirected to a third page that has been written specificallyfor either of these browser versions.
Explanatory discussion follows the script examples.
#1 ----------------------------------------------------------------#2 ---------------------------------------------------------------#3 ---------------------------------------------------------------#4 ---------------------------------------------------------------#5 ---------------------------------------------------------------
Any of these five different scripts can be utilized. These havebeen compiled after many attempts at using other suggestedscripts that either were too limited, were not applicable toidentifying version 5 and higher browsers, or just did not seemto work as anticipated.
All these scripts are a series of conditional statements, whichare read by the visitor's browser when the web page 'ie55.htm'is loaded.
1. The browser reads the first statement and if it is Netscape6.1, it is redirected to the page written specifically forNetscape 6.1. If not,
2. The browser reads the next statement and if it is Netscape4.7, it is redirected to the page written for the 'number 4¡¯version of either Internet Explorer or Netscape Navigator. Ifnot,
3. The browser reads the next statement and if it is InternetExplorer 4.0, it too is redirected to the page written for the'number 4' version of either Internet Explorer or NetscapeNavigator. And lastly,
4. If none of the statements apply, the browser will remain onthe same page that contains the script and proceed to read theremainder of the page.
Next are several observations made after consulting severalresources (online and in print) and conducting many 'trial anderror' sessions.
Peculiarities encountered that caused difficulties include;
1. Regarding the line that identifies a browser's version number
(navigator.appVersion.indexOf(" ") != -1) Internet Explorer; youmust use "MSIE 4", not "MSIE 4.0", "4", or "4.0". The same istrue whether or not this additional ¡®if¡¯ statement,(navigator.appName.indexOf("Internet Explorer") != -1), isincluded as in #1. Use "MSIE 5" to identify Internet Explorer5.5. **See below for more about Internet Explorer and versionnumbers. Version 5.5 does not fall under the category of version5 or higher.
Netscape Navigator; in this statement either "5.0" or "5" willwork with Netscape 6.1 resulting in directing the browser to thepage optimized for Netscape 6.1. if(navigator.appName.indexOf("Netscape") != -1) { if(navigator.appVersion.indexOf("5.0") != -1)window.location="nn61.htm"; } But in this statement, "5.0" mustbe used. "5" results in Netscape 4.7 being directed to the pageoptimized for Netscape 6.1 instead of the page optimized forNetscape 4.7. The reason is unknown. This peculiarity wasdiscovered through 'trial and error'.
if (navigator.appName.indexOf("Netscape") != -1) { if(navigator.appVersion.indexOf("5.0") == -1)window.location="ienn4.htm"; } ** NOTE: Attempting to separatebrowsers based upon their version number is not as straightforward as it might seem. The reason is that both InternetExplorer 4.0 and Internet Explorer 5.5 have the same versionnumber of 4! Also Netscape 6.1 has a version number of 5! Sotrying to detect and then select browsers based on versionnumbers results in confusion. In particular
The version number of '5 and higher' will exclude InternetExplorer 5.5 The version number of '4 and lower' will includeInternet Explorer 5.5 The version number of '6 and higher' willexclude Netscape 6.1
2. Regarding the line that identifies a browser's name
(navigator.app.Name.indexOf(" ") != -1)
Internet Explorer; you must use "Internet Explorer","Microsoft", or "Microsoft Internet Explorer". "MSIE" is notrecognized.
3. All of these browsers, Netscape 4.7 and 6.1, and InternetExplorer 4.0 and 5.5, have the same code name of Mozilla.
Therefore these browsers can not differentiated based on theircode name.
Conclusions;
Remember that these scripts are to be placed on the page thathas been optimized for viewing using the Internet Explorer 5.5browser.
If a Netscape 6.1 browser is being used, the visitor isautomatically redirected to the page that has been optimized forNetscape 6.1.
If a Netscape 4.7 browser is being used, the visitor isautomatically redirected to the page that has been optimized foreither Netscape 4.7 or Internet Explorer 4.0.
If an Internet Explorer 4.0 browser is being used, the visitoris automatically redirected to the page that has been optimizedfor either Netscape 4.7 or Internet Explorer 4.0.
If none of these three 'if' conditional statements are true, thebrowser will remain on the present page and will continue onwith interpreting that page, in this case the page that has beenoptimized for Internet Explorer 5.5.
To use these scripts, remember to replace the fictitious pages"nn61.htm", "ienn4.htm", and "ie55.htm" with your actual pages.Also if using one of these scripts on a page that is created forviewing using a browser other than IE 5.5, further adjustmentswill be necessary, as well as, then re-testing the script(s).
Remember that some of the other browser types that are in useinclude, i.e. AOL, Netscape Navigator 3.0 or lower, InternetExplorer 3.0 or lower, Opera (various versions), Web TV, Lynx,Konqueror. All of these are used in small numbers and whetherone wants to address each one of these browsers is an individualdecision.
There are different web sites that contain statistics on browserusage that can be reviewed. The best source of information onthe actual browsers that are used to view your web site are yourown visitor logs. Check those as they may or may not agree withother published web statistics.
Obviously Intranets are a special environment and one in whichthe pages must be optimized for the particular browser that isin use on the Intranet machines. This is a much easier situationto have to contend with.
Unfortunately until the 'browser wars' come to an end and an'across the board acceptance' of the W3C's guidelines for codingis the rule, browser incompatibilities will continue toinfluence web page construction.
|
|
|
|
|
|
