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. |
