Redirecting the user to a new page is very easy to do with JavaScript. But there a couple of tips the make the user experience much better.

Tips

We want to make the redirection as painless as possible and not annoy the user.

Tip 1: Remove the Redirect Page from the Brower History

How many times have you been directed, then decided to click your browser's Back button, only to be redirected again, and again, and again, as you could not click back fast enough to by-pass the redirect page?

There is a simple tip to help out the user. The JavaScript location object has a replace method that will replace the current URL in the browser's history with a new URL (the one you are redirecting to).

 
// The second argument set to true will replace the current URL
// in the browser history with the new URL you are redirecting to
window.location.replace("my_new_page.htm",true);

Tip 2: Help Out JavaScript Disabled Users

Not everyone has JavaScript or has it enabled. Respect that. Add a <noscript> tag with a message and a link.

 
<noscript>
<p>
This page has recently moved. Please update your bookmarks. Click here to go to <a href="moved_page.htm">[Title of the page to redirect to]</a>.
</p>
</noscript>

Tip 3: Name the Title of the Page that Moved

Users will want to know that they are being redirected to the correct page, so provide the page title. I like to put it in the link text, instead of just saying "Click here."

 
<p>
This page has recently moved. Please update your bookmarks. If you are not redirected in 5 seconds, click here to go to <a href="moved_page.htm">[Title of the page to redirect to]</a>.
</p>

Tip 4: Optional: Add a ten second delay

Give users a chance to see what is going on and react, if they wish. Do not just redirect users to a new URL: they might not trust that you are doing them a favor. Some users won't notice, but some do. If they are familiar with your site and they stay on your site, then all is fine. But they might not trust that they are being redirected. I added a ten second delay. This is a common practice. And it let's them know that the URL has changed so they an update their bookmarks if necessary. Be sure to add a link they click to move on in less than ten seconds, as well.

 
<script type="text/javascript">
function Redirect(sURL)
{  window.location.replace(sURL,true);
}
 
setTimeout("Redirect('moved_page.htm')",10000);
 
</script>

That's it!

To see an example, visit User-Friendly JavaScript Redirection Example.

And if you need to understand the above code better, read on for more details on the Window Location object.

The Window Location Object

The window property window.location actually refers to the JavaScript Location object. The Location object "represents the web address ... of the document currently displayed in [the browser] window" (JavaScript: The Definitive Guide). Because the Location object has read/write properties and methods, you can also use it to programmatically load new documents into the browser by specifying the URL of the Location object. Again, to use the Location object, you refer to it via the window.location property, which is a little confusing, but that's how it works.

Although the Location object has properties and methods, such as location.href and location.replace(), for loading a new document, if you assign a URL (string value) directly to the window.location property, the default behavior is to load the document at that URL.

 
// Both of these lines do the same thing, load a new document
window.location = "my_new_page.htm";
window.location.href = "my_new_page.htm";