Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 
Updated October 22, 2001

JavaScript Tip:
Browser Detection And Redirection

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
November 2000
Vol. 3, No. 15
 • CSS Tip
 • JavaScript Tip
 • Beginner Tip
  

Most Web sites want to attract as many visitors as possible, so developers are motivated to design sites that will be accessible to the largest possible audience. But browser incompatibility problems often make it necessary to design pages for individual browsers.

A JavaScript browser detection and redirection script can improve your visitors' experience by routing them to pages optimized for their particular browser.

Uses For Browser Detection and Redirection

Although it's time-consuming, there are times when you need to design separate pages for specific segments of your audience.

  • WebTV: The current version of WebTV only supports a limited version of JavaScript (called JellyScript), so some of your JavaScripts effects (even simple rollovers) may not work properly. WebTV has a lot of other display differences too. If you expect a lot of visitors using WebTV, test your site on a live system or download the WebTV Viewer to simulate the display.
  • DHTML: Some DHTML effects are coded differently in Netscape and Explorer. In many cases, you can try and include the HTML code for both browsers on the same page. Otherwise, you need to create different pages and route visitors with JavaScript.
  • CSS: Netscape and Explorer also support Cascading Style Sheets (CSS) differently. Here again, you can include instructions for both browsers on a single page. However, if that gets too confusing, route visitors to the appropriate format for their browser using JavaScript.

Browser Detection Scripts

A browser detection script can check for browser types, browser versions, available plug-ins, languages, and platforms. Depending on the purpose, you can have the script write a message to your visitors, notify them about plug-ins required for the site, or automatically redirect visitors to a different Web page.

The first step is to decide which browsers you need to check for. While Netscape and Explorer are the most obvious choices, you should at least consider checking for WebTV if your site is designed to appeal to the consumer audience. While WebTV only has 2 million subscribers at this writing, half of them have purchased online.

The JavaScript code in this example queries the "navigator" object, which contains information about which browser and browser version your visitors are using to view your site. This simple detection script will identify the application name (appName) in use and display an alert box.


This script is relatively easy because we're just checking for the browser type, not the individual version (Explorer 5.0, Netscape 4.7, etc.). Detecting browser versions (appVersion) is more tricky. You can download free scripts to detect the version from various JavaScript sites, but the results are often unpredictable. Test them carefully!

Browser Redirection

Telling your visitors which browser they're using is a neat trick, but it's probably something they already know.

The script is more useful when you modify it to redirect users to a page optimized for their particular browsers. While you'll have to spend time optimizing your individual pages, the script itself is very easy:


This script uses IF statements to check for browsers until one returns true. At that point, the visitor is redirected to a page optimized for that browser (using the window.location property). The final window.location statement takes visitors to your default page if all the IF statements return false.

Note: the page names we used in this script are for illustration only. You are free to name your pages anything you want!

So remember: browser detection and redirection is very easy. However, you may increase your workload tremendously if you have to create different versions of every page in your site.

NetMechanic's HTML Toolbox scans your page and alerts you to HTML code that may not display correctly across browsers. Look at your results and make sure that the techniques you want to include are worth the time it will take you to design the alternate pages.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.