314 HOW: The Joy of JavaScript: Browser Compensation
ditional methods allow—but there was one problem. As you’ll remember from Chapter 10, Netscape Communicator 4 has fairly shoddy CSS support. It does not display CSS properly and can even crash when encountering CSS layouts.
Our referrer logs told us that 10% of our audience was using Netscape 4. How could we offer our splash page to 90% of the audience without offering ugliness (and possible browser instability) to the other 10%?
JavaScript to the Rescue!
We solved our problem by writing a simple browser detection script and embedding it in the <HEAD> of our HTML page:
<!-- This is for bugs in Netscape 4 --> <script type=”text/javascript”>
<!-- bName=navigator.appName;
bVer=parseInt(navigator.appVersion);
if (bName == “Netscape” && bVer >= 5) br = “n5”; else if (bName == “Netscape” && bVer >= 4) br = “n4”; else if (bName == “Netscape” && bVer==3) br = “n3”; else if (bName == “Netscape” && bVer==2) br = “n2”;
else if (bName == “Microsoft Internet Explorer” && bVer >= 5) br = “e5”; else if (bName == “Microsoft Internet Explorer” && bVer >= 4) br = “e4”; else if (bName == “Microsoft Internet Explorer”) br = “e3”;
else br = “n2”; //--> </script>
This script defined Netscape 4 to keep an eye out for it. (We didn’t worry about the earlier browsers because no one uses them to visit ALA.) When a Netscape 4 user hit the splash page, he was redirected to an alternate page via a second simple script:
<script type=”text/javascript”> <!--
if (br == “n4”) { window.location=”/stories/decline/main.html”
}
//--> </script>
Taking Your Talent to the Web |
315 |
As you can see, this script checked for a condition (browser = Netscape 4). If that condition was met, JavaScript’s built-in window.location object directed Netscape 4 users to main.html, the issue’s table of contents page. The rest of the audience got to main.html by clicking the link on the splash page. Netscape 4 users missed the splash page but they didn’t miss a drop of content, and they didn’t realize they were missing anything. In this way their needs were accommodated without disturbing them or any other visitor to the site.
On a commercial project, we might have gone ahead and built a table-cell version of this page for Netscape 4 users and used browser detection and window.location to send them to that page instead.
Location, location, location
There is a drawback to using window.location. Because the redirected users don’t realize they’ve been redirected, they bookmark the page to which they’ve been redirected instead of the actual index page. That’s fine for them, but when they send their friends the URL or link to the site from a site of their own, they will be sending other users to an inner page instead of the cover.
There is a way around that—it involves frames—but it’s a tired, messy hack, and we don’t recommend it. If you insist on seeing how it works, visit Happy Cog (http://www.happycog.com/), where we combine browser detection and redirects with frames. Hopefully, by the time you read this, we will have redesigned Happy Cog, and you won’t be able to see what we’re talking about anyway. Never mind.
Browser detection is not always as simple as what we’ve just shown. Given that browsers can function differently on different platforms—and because incremental upgrades can also function differently (the 4.5 version might choke on code the 4.6 version handles with ease)—browser detection can get very specific and painfully complex. By a strange coincidence, we have more to say about that very thing.