5.10 Defining Browser- or Feature-Specific Links

NN 2, IE 3

5.10.1 Problem

You want a link to navigate to different destinations based on browser or object model feature support.

5.10.2 Solution

A link can have multiple destinations, usually with one URL hardwired to the href attribute of the <a> tag, and scripted URLs invoked from the <a> element's onclick event handler. The latter must cancel the default behavior of the href attribute.

In the following example, the scripted navigation goes to one of two destinations: one for Windows Internet Explorer users and one for all other users who are using browsers capable of referencing elements via the W3C DOM document.getElementById( ) syntax. For all other browsers, the hardwired URL is the destination:

function linkTo(ieWinUrl, w3Url) {
    var isWin = (navigator.userAgent.indexOf("Win") != -1);
    // invoke function from Recipe 5.3
    var isIE5Min = getIEVersionNumber( ) >= 5;
    var isW3 = (document.getElementById) ? true : false;
    if (isWin && isIE5Min) {
        location.href = ieWinUrl;
        return false;
    } else if (isW3) {
        location.href = w3Url;
        return false;
    }
    return true
}
...
<a href="std/newProds.html" title="To New Products" 
onclick="return linkTo('ieWin/newProds.html', 'w3/newProds.html')">New Products</a>

When the scripted navigation succeeds, the function returns a value of false, which forces the onclick event handler to evaluate to return false. This automatically cancels the default behavior of the <a> tag. But if the browser is scriptable and not in either of the desired categories, the onclick event handler evaluates to return true, allowing the default navigation action of the <a> tag to prevail.

5.10.3 Discussion

For a public web site that you hope will be indexed by search engine spiders and "bots," make sure that every <a> tag has a default destination assigned to its href attribute, even if you expect most of your visitors' browsers to follow the scripted path. Most automated services don't interpret JavaScript, but avidly follow href links.

Another consideration when scripting links is that the URL assigned to the href property is the one that appears in the status bar whenever the user rolls the cursor atop the link. There are many user interface design philosophies about what should appear in the status bar. Inexperienced users may be flummoxed by all the slashes and filename weirdness that appears there; experienced users may prefer to see the path of the destination to see if the link will be taking them where they anticipate going.

You have the option, via onmouseover and onmouseout event handlers of the link, to assign customized strings to the status bar to override the default behavior. In the previous example, you could have the link display a message such as "See our latest new products...". This might be okay for the parallel structure hinted at by the example (all links go to new products pages). Experienced users, however, may still prefer to see a real URL. You could even go to the extreme of devising onmouseover and onmouseout event handlers that pass parameters just like the linkTo( ) function to display browser-specific URLs.

One last suggestion, which may be useful in many situations, is to use the location.replace( ) method, rather than assigning a URL to the location.href property. In the previous example, the statement:

location.href = ieWinUrl;

can be changed to:

location.replace(ieWinUrl);

The replace( ) method instructs the browser to overwrite the browser's navigation history so that the new page takes the place of the current page. Once at the new page, a click of the Back button does not return the user to the page that had the link in it. You will have to judge from user testing of your site whether this technique is applicable.

5.10.4 See Also

Recipe 10.2 to keep the current page out of the browser's history list; Recipe 10.6 for using URLs to pass data from document to document.