Previous Page
Next Page

Redirecting the User with a Link

You can check for the existence of JavaScript and then seamlessly redirect, or send users to another page, depending on if they have JavaScript turned on. This example shows you how to embed the redirection in a link. We'll use two HTML pages and one JavaScript file. The first HTML page, Script 2.9, gives the user the link to click. Script 2.10 is the JavaScript file, and Script 2.11 is the HTML page the user is redirected to if they have JavaScript enabled. Figure 2.6 shows the starting point for users. When they click the link, they'll be taken to one of two pages, depending on whether or not they have JavaScript.

Script 2.9. This HTML allows you to redirect the user based on a link.

<!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="script07.js" type="text/javascript" language="javascript">
     </script>
</head>
<body bgcolor="#FFFFFF">
     <h2 align="center">
         <a href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a>
     </h2>
</body>
</html>

Script 2.10. By embedding the redirection inside the code, the user doesn't even know your script intervened in the link.

window.onload = initAll;
function initAll() {
     document.getElementById("redirect"). onclick = initRedirect;
}
function initRedirect() {
     window.location = "jswelcome.html";
     return false;
}

Script 2.11. This is the HTML for the page the JavaScript-enabled user ends up on.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Our site</title>
</head>
<body bgcolor="#FFFFFF">
     <h1>Welcome to our web site, which features lots of cutting-edge JavaScript</h1>
</body>
</html>

Figure 2.6. This page has the link that contains the redirection code.

[View full size image]


To redirect a user:

1.
<a href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a>

In Script 2.9, this is the link the user clicks. If users don't have JavaScript and they click the link, they'll follow the usual href path and end up on a page that looks like Figure 2.7. If users have JavaScript and they click the link, the script (down in step 4) takes over and loads a new page.

Figure 2.7. This message gives the user the heave-ho, if you've decided that JavaScript is essential to your site.

[View full size image]


2.
window.onload = initAll;

Now we're in Script 2.10. When the page finishes loading, it triggers the initAll() function.

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

This function simply tells the element with the id redirect that it should call the initRedirect() function when it (that is, the link from step 1) is clicked.

4. 
function initRedirect() {
  window.location = "jswelcome.html";
  return false;
}



If this function is called, then it sets window.location (the page displayed in the browser) to a new page. The return false says to stop processing the user's click, so the href page doesn't get loaded.

What's so cool about this is that we've done a redirection without users having any idea that it happened. They're just on one of two different pages, depending on what they came in with. If they have JavaScript, they end up on a page shown in Figure 2.8.

Figure 2.8. JavaScript-savvy browsers see this page instead.

[View full size image]


Tip

  • On first glance, we might think that we could just set the onclick handler globallythat is, as the page is loadingbut we can't. There's a chance, particularly for a large and complex page, that the browser will not yet have come across that redirect id, and if that happens, JavaScript won't be able to assign the onclick handler. Instead, we have to wait until the page has completed loading, and that's done via onload.



Previous Page
Next Page