JavaScript Tip: Browser Detection And Redirection

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.

<script language="JavaScript" 

type="text/JavaScript">

 if(navigator.appName == "WebTV")

{

 alert("You're using the WebTV browser.")

}

 if(navigator.appName == "Netscape")

{

 alert("You're using a Netscape browser.")

}

 if(navigator.appName == "Microsoft Internet Explorer")

{

 alert("You're using the Internet Explorer browser.")

}

</script>

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:

<script language="JavaScript" 
type="text/JavaScript">
if(navigator.appName == "WebTV")
{
 window.location = "WebTVHome.html"
}
 if(navigator.appName == "Netscape")
{
 window.location = "NetscapeHome.html"
}
 if(navigator.appName == "Microsoft Internet Explorer")
{
 window.location = "ExplorerHome.html"
}
 window.location == "Other.html"
</script>

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.