Home / Web Builder Channel
 LOOK FOR...   WITH KEYWORDS:  

Consumer Watch
On The Money
Career Track
Health Quest
Business
Small Office
Web Builder
Marketing
Classifieds
Credit & Debt
Biz Finance
IR Journal
Legal Forms
Letter Templates
Archives
HOME

S U B S C R I B E

Good To Know

What People Search For
8 Things You Can Do Today To Start Increasing Traffic
Ten Web Basics For Success
John's 15 Search Engine Registration Tips
Designing Your First Web Site?

 

 

SPONSOR LINKS

Web Hosting, Low Cost
Yourname.com, 100 MB of webspace, FTP, Cgi-Bin, 50 POP3 email account, MySQL

Web Hosting, High-end
Managed dedicated servers

Automate Your Email
Use autoresponders to automatically deliver sales information to customers

Web Hosting, Economical
High speed and reliable

Register Your .TV Domain Name
Exclusive registrar of .tv domain names

Back-order Domain Names
Waiting list for domain names that expire

Personalized Domain Names
Meaningful web addresses in your own language

Web Hosting & Domain Registration
Host, transfer, sell, plus other services regarding domain names

Animated .gifs
Thousands of animated clip-art to download

 


PRINT THIS

Javascript---Browser Detection And Page Redirection

A project was developed using Internet Explorer 5.5 as the 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 Netscape Navigator 4.7 revealed some "distortions." This was mainly due to whether or not a particular browser could interpret style sheets, and if so, how the style sheets were interpreted.

It was apparent that the page code either needed to be downgraded to the "lowest common denominator" or alternative versions of the web page were needed for Netscape 6.1, Netscape 4.7, and Internet Explorer 4.0. Therefore, a version optimized for Netscape 6.1 was created, as well as another version compatible for both Netscape 4.7 and Internet Explorer 4.0. (This was before Internet Explorer 6.0 and Netscape 6.2 were available.)

Review of several current web sites and textbooks on Javascript presented different approaches to writing script to first detect a user's browser, and then depending on the browser and version, to redirect the user to a specific page. In this particular case, none of the recommendations or solutions were what was needed. After a good deal of testing and re-testing, the following script examples were assembled.

Below are five different examples/variations of some Javascript that is to be placed on a page that is optimized for Internet Explorer 5.5. These scripts will then automatically detect the visitor's browser and version, and then automatically direct the particular browser in one of three directions. They are:

  1. If a visitor is using Internet Explorer 5.5, to remain on the current page.
  2. If a visitor is using Netscape 6.1, to be redirected to a page that has been optimized for Netscape 6.1.
  3. If a visitor is using Internet Explorer 4.0 or Netscape 4.7, to be redirected to a third page that has been written specifically for either of these browser versions. Explanatory discussion follows the script examples.
  1. if (navigator.appName.indexOf("Netscape") != -1) { if (navigator.appVersion.indexOf("5.0") != -1) window.location="nn61.htm"; }

    if (navigator.appName.indexOf("Netscape") != -1) { if (navigator.appVersion.indexOf("5.0") == -1) window.location="ienn4.htm";}

    if (navigator.appName.indexOf("Internet Explorer") != -1) {if (navigator.appversion.indexOf("MSIE 4") != -1) window.location="ienn4.htm";}

  2. if (navigator.appName.indexOf("Netscape") != -1) { window.location="nn61.htm";}

    if (navigator.appName.indexOf("Netscape") != -1) { if (navigator.appVersion.indexOf("5.0") == -1) window.location="ienn4.htm";}

    if (navigator.appVersion.indexOf("MSIE 4") != -1) { window.location="ienn4.htm";}

  3. if (navigator.appVersion.indexOf("5.0") != -1) { window.location="nn61.htm";}

    if (navigator.appName.indexOf("Netscape") != -1) { if (navigator.userAgent.indexOf("Mozilla/4") != -1) window.location="ienn4.htm";}

    navigator.appVersion.indexOf("MSIE 4") != -1) { window.location="ienn4.htm";}

  4. (navigator.appVersion.indexOf("5.0") != -1) { window.location="nn61.htm";}

    (document.layers) { if (navigator.userAgent.indexOf("Mozilla/4") != -1) window.location="ienn4.htm";}

    (navigator.appVersion.indexOf("MSIE 4") != -1) { window.location="ienn4.htm";}

  5. (navigator.appVersion.indexOf("5.0") != -1) { window.location="nn61.htm";}

    ( ! (document.all)) { if (navigator.appVersion.indexOf("5.0") == -1) window.location="ienn4.htm";}

    (navigator.appVersion.indexOf("MSIE 4") != -1) { window.location="ienn4.htm";}

Any of these five different scripts can be utilized. These have been compiled after many attempts at using other suggested scripts that either were too limited, were not applicable to identifying version 5 and higher browsers, or just did not seem to work as anticipated.

All these scripts are a series of conditional statements, which are read by the visitor's browser when the web page "ie55.htm" is loaded.

The browser reads the first statement and if it is Netscape 6.1, it is redirected to the page written specifically for Netscape 6.1. If not,

The browser reads the next statement and if it is Netscape 4.7, it is redirected to the page written for the "Number 4" version of either Internet Explorer or Netscape Navigator. If not,

The browser reads the next statement and if it is Internet Explorer 4.0, it too is redirected to the page written for the "Number 4" version of either Internet Explorer or Netscape Navigator. And lastly,

If none of the statements apply, the browser will remain on the same page that contains the script and proceed to read the remainder of the page. Next are several observations made after consulting several resources (online and in print) and conducting many "trial and error" sessions.

Peculiarities encountered that caused difficulties include;

  1. Regarding the line that identifies a browser's version number
  2. (navigator.appVersion.indexOf(" ") != -1) Internet Explorer; you must use "MSIE 4", not "MSIE 4.0", "4", or "4.0". The same is true whether or not this additional ‘if’ statement, (navigator.appName.indexOf("Internet Explorer") != -1), is included as in #1. Use "MSIE 5" to identify Internet Explorer 5.5.

    See below for more about Internet Explorer and version numbers. Version 5.5 does not fall under the category of version 5 or higher.

    Netscape Navigator; in this statement either "5.0" or "5" will work with Netscape 6.1 resulting in directing the browser to the page 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" must be used. "5" results in Netscape 4.7 being directed to the page optimized for Netscape 6.1 instead of the page optimized for Netscape 4.7. The reason is unknown. This peculiarity was discovered through 'trial and error'.

    if (navigator.appName.indexOf("Netscape") != -1) { if (navigator.appVersion.indexOf("5.0") == -1) window.location="ienn4.htm"; } **

    NOTE: Attempting to separate browsers based upon their version number is not as straight forward as it might seem. The reason is that both Internet Explorer 4.0 and Internet Explorer 5.5 have the same version number of 4! Also Netscape 6.1 has a version number of 5! So trying to detect and then select browsers based on version numbers results in confusion. In particular

    The version number of "5 and higher" will exclude Internet Explorer 5.5 The version number of "4 and lower" will include Internet Explorer 5.5 The version number of "6 and higher" will exclude Netscape 6.1

  3. Regarding the line that identifies a browser's name
  4. (navigator.app.Name.indexOf(" ") != -1)

    Internet Explorer; you must use "Internet Explorer," "Microsoft," or "Microsoft Internet Explorer." "MSIE" is not recognized.

  5. All of these browsers, Netscape 4.7 and 6.1, and Internet Explorer 4.0 and 5.5, have the same code name of Mozilla.

Therefore these browsers can not differentiated based on their code name.

Conclusion

Remember that these scripts are to be placed on the page that has been optimized for viewing using the Internet Explorer 5.5 browser.

If a Netscape 6.1 browser is being used, the visitor is automatically redirected to the page that has been optimized for Netscape 6.1.

If a Netscape 4.7 browser is being used, the visitor is automatically redirected to the page that has been optimized for either Netscape 4.7 or Internet Explorer 4.0.

If an Internet Explorer 4.0 browser is being used, the visitor is automatically redirected to the page that has been optimized for either Netscape 4.7 or Internet Explorer 4.0.

If none of these three "if" conditional statements are true, the browser will remain on the present page and will continue on with interpreting that page, in this case the page that has been optimized 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 for viewing using a browser other than IE 5.5, further adjustments will be necessary, as well as, then re-testing the script(s).

Remember that some of the other browser types that are in use include, i.e. AOL, Netscape Navigator 3.0 or lower, Internet Explorer 3.0 or lower, Opera (various versions), Web TV, Lynx, Konqueror. All of these are used in small numbers and whether one wants to address each one of these browsers is an individual decision.

There are different Web sites that contain statistics on browser usage that can be reviewed. The best source of information on the actual browsers that are used to view your Web site are your own visitor logs. Check those as they may or may not agree with other published web statistics.

Obviously Intranets are a special environment and one in which the pages must be optimized for the particular browser that is in use on the Intranet machines. This is a much easier situation to 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 coding is the rule, browser incompatibilities will continue to influence web page construction.

William J. Tolson recently retired from 25 years of clinical dentistry. Self-taught, now focuses on Web site design, optimization, accessibility.
Full Author Profile -->


PRINT THIS

 

DEPARTMENTS

CoolWare

Feature Story:

A Must-have Application: WinZip 9 SR-1
Untangled Web

Feature Story:

Some Simple JavaScript Functions


R E C E N T   S T O R I E S

Business Credit
The Layperson's Crash Course in Business Credit
Street-Smart Financing
How to Start or Expand Your Business with Street-Smart Financing
Attract the Perfect Investor
How to Attract the Perfect Investor for Your Business
Federal Help For Your Business
How to Obtain Local, State and Federal Help For Your Business

 

 

InsiderReports

Home  | Affiliate Login  | Search  | Advertise  | Classifieds  | Contact Us  | About Us  | Index
 

The Horizons Unlimited Group

Copyright © 1996-2009 Horizons Unlimited Group. All Rights Reserved.     Privacy Policy | Terms of Use
 


Click to verify BBB accreditation and to see a BBB report.