Previous Page
Next Page

Using JavaScript to Enhance Links

Sometimes, you may want to perform some sort of action after the user clicks a link, but before the browser goes to the link's destination. A typical example would be when you want to put up an alert before the user goes to a particular page on your site, or to make it clear when the user leaves your site. In this example, we'll put up an alert dialog before continuing on to the ultimate destination. Script 2.12 shows the HTML, and Script 2.13 shows the small amount of changes we need to make to previous scripts.

Script 2.12. The HTML, as usual, contains an id in the link tag that JavaScript can use.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <title>Welcome to our site</title>
      <script src="script08.js" type="text/javascript" language="javascript">
      </script>
</head>
<body bgcolor="#FFFFFF">
      <h2 align="center">
        Hey, check out <a href="http://www.pixel.mu/" id="redirect">my cat's Web site</a>.
      </h2>
</body>
</html>

Script 2.13. The link enhancement script.

window.onload = initAll;

function initAll() {
     document.getElementById("redirect"). onclick = initRedirect;
}

function initRedirect() {
     alert("We are not responsible for the content of pages outside our site");
     window.location = this;
     return false;
}

To enhance links:

1. 
Hey, check out <a href="http://www.pixel.mu/" id="redirect"> my cat's Web site</a>.



This line in Script 2.12 shows the link, with the HRef for the link's destination, and the id for the link, which will be used by Script 2.13. The page is shown in Figure 2.9.

Figure 2.9. Clicking the link will redirect the user to our cat's Web site.

[View full size image]


2. 
alert("We are not responsible for the content of pages outside our site");



This alert appears after the link has been clicked, as shown in Figure 2.10.

Figure 2.10. If the user has a JavaScript-capable browser, they'll see this warning message as they leave.


3. 
window.location = this;



This line allows us to set the browser window to the location specified by the keyword this, which contains the link. For now, just think of this as a container; we'll be going into it in more detail later in the book. If you want to know more now, see the "What is 'this?'" sidebar in Chapter 4. When the user reaches their final destination, it looks like Figure 2.11 (at least, using our cat's Web page as the destination).

Figure 2.11. In this case, we'll admit that we actually are responsible for this cat's page (what, you think he does it himself?).

[View full size image]


Tips

  • You may have noticed that nowhere in the code does it refer to a particular Web pagethat's part of the power of the this keyword. One of the things this does for us is grab the URL from the HTML link (that is, the value of the a tag's href attribute). Because we're using this approach, we don't have to touch Script 2.13 if we someday change Script 2.12 to point to our kid instead of our cat. In fact, we could have links all over our Web site calling this same script, and that one line of code would automatically grab their href values as well.

  • If that previous tip wasn't enough, think about it this way: with this approach, your HTML pages can be modified by WYSIWYG editors and people who know nothing about JavaScriptand so long as they only change the HTML pages, they can't screw up your script.

  • That wasn't enough for you either? Here's another benefit: if the user's browser doesn't understand JavaScript, it loads in only the HTML page. When they click the link, it loads just as it normally would: no errors, no confusing "you must have some other browser," no problems.

  • This kind of coding stylewhere the code is separated out from the HTML, so that both are more flexibleis referred to as unobtrusive scripting. If you want to know more about how this fits in with all the other buzzwords you hear about code on the Web, check out the "Just Enough Terminology" sidebar.



Previous Page
Next Page