Browser detection with javascript

Web designers commonly target specific browsers that can support certain design feature, then write code to take advantage of these browsers’ added functionality. Therefore, if you determine which browser is visiting your page, you can use JavaScript to design certain elements for the page. Similarly, by determining which plug-ins a browser supports, you can include content that the plug-in supports.

Browses that do not support JavaScript can be offered alternative XHTML pages that do not rely on the JavaScript code. However, it is unlikely that current users that current users have browsers that do not support JavaScript.

The navigator object is part of the JavaScript object model. It allows access to information specific to the browser. Within the navigator object are several properties that can be tested.

Click on ‘Test Browser’ to see how it works
View source of browser_detection.html to see the code.

***Notice that in the results the browser code name and user agent string displayed for the Internet Explorer browser includes the name Mozilla, which is commonly associated with the Netscape browser. This interesting turn is simply a legacy of the browser wars, when Microsoft copied Netscape’s user-agent string so that people using Internet Explorer browsers could not be locked out of sites that were designed for Netscape Browser.***

Sniffers and redirections

You can use JavaScript to create sniffer code that will direct the user based on the browser in use. Suppose that you want to add some browser specific functionality to your web pages. To ensure that all Web users can access your site, regardless of the browsers they use, you need the ability to test and identify your users’ browsers. Using a sniffer and redirection will make your site more accessible to more users while allowing you the option to incorporate browsers-specific functionality if you choose.

Just add the following JavaScript function to perform redirection, remember to put the name of your specific file name in document.location.href=” ” ,


function checkBrowser()
{
var name=navigator.appName;
if(name.indexOf('Netscape')!=-1)
{
document.location.href="webpage_for_mozilla.html";
}
else{
if(name.indexOf('Microsoft')!=-1)
{
document.location.href="webpage_for_IE.html";
}
}
}


Tags: Browser detection, JavaScript, sniffers and redirections

This entry was posted on Tuesday, March 17th, 2009 at 4:30 pm and is filed under JavaScript and DHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.