Home arrow DHTML arrow Page 3 - Cross-browser Functionality with Branching
DHTML

Cross-browser Functionality with Branching


There are several methods of ensuring cross-browser functionality with at the major browser vendors. Explore what the userAgent object can do. Included are code samples for determing what browsers visitors to your sites are using.

Author Info:
By: Dan Wellman
Rating: 3 stars3 stars3 stars3 stars3 stars / 7
October 05, 2004
TABLE OF CONTENTS:
  1. · Cross-browser Functionality with Branching
  2. · Identify the Browsers Your Visitors Use
  3. · Test Browser and Re-direct Visitor

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Cross-browser Functionality with Branching - Test Browser and Re-direct Visitor
(Page 3 of 3 )

A common method of creating sites that are cross-browser compatible is to test the browser on the home page and redirect the visitor to a page written specifically for that particular browser. 

This can be easily achieved by modifying the above code to:

<html>
<head>
<title>Cross Browsr Detection</title>
<script language="javascript">
userAgen=(navigator.userAgent);
locMSIE=userAgen.indexOf("MSIE");
locNS=userAgen.indexOf("Netscape");
locOpera=userAgen.indexOf("Opera");
locFirefox=userAgen.indexOf("Firefox");
locMozilla=userAgen.indexOf("Mozilla");
locGecko=userAgen.indexOf("Gecko");

if (document.layers) {
 window.location = "nsPage.htm";
}
else if(locNS != -1) {
 window.location = "nsPage.htm";
}
else if(locOpera != -1) {
 window.location = "opPage.htm";
}
else if (locFirefox != -1) {
 window.location = "fiPage.htm";
}
else if (locMozilla != -1 && locGecko != -1) {
 window.location = "moPage.htm";
}
else if (locMSIE != -1) {
 window.location = "msPage.htm";
}

</script>
</head>

Save this as browserDetecting2.htm

Also create an htm file as follows:

<html>
<head>
<title>Microsoft Compatible Page</title>
</head>
<body>
<H1>Welcome to the Microsoft Page</h1>
</body>
</html>

Make sure this is saved in the same directory. You can also create the other pages, one for Netscape called nsPage.htm, etc. The main differences between the two browser detection pages are that the browserVersion variables have been removed; these are not needed for the redirection aspect and can easily be inserted in the separate browser specific pages.

Also, instead of writing a line of text, the if statements open the appropriate page. The locGecko variable is needed because MSIE appears in the userAgent object of Opera and without looking for Gecko as well, it will try to open the msPage file.

Additionally, the string ‘Netscape’ does not appear in the userAgent object for Netscape Navigator 4 so without the layer test at the start, navigator 4 does nothing. This is not the case for Netscape 6+ which is why the locNS variable is still needed.

This technique is known as external branching, and uses conditional branching (the if statements) to access other pages. If you had a script that actioned or ignored sections of code on one page, this would be classed as internal branching, and is exactly what can be done with the version number section of our browserDectecting file.

As browsers are evolving, they are slowly coming into line with one another, (or the W3C as the case may be) and the issue of compatibility is a diminishing one. The above script can still be useful when using browser-specific content, however, for example, the opPage could have links to www.opera.com and the moPage could contain links to www.mozilla.org. Besides which, not everyone is using the latest version of their chosen browser. Corporations that do not want to upgrade even free software across their business due to simply the length of time this can take and the problems it can cause, may still be making their staff stick with version 4 browsers. Regardless of this, I hope you’ve enjoyed the exploration of the userAgent object and can make use of it in some way, shape or form.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 3 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials