You are here: irt.org | Articles | JavaScript | Location | Automatic Redirection [ previous next ]
Published on: Sunday 8th June 1997 By: Martin Webb
As people move their web pages from one ISP to another, or they invest in their own vanity URL, the older pages are still visited until people become aware of the new location.
This article describes how to create a page to place on at your old address that will automatically redirect the visitor to the new page.
There are two methods we can use, one JavaScript and one non JavaScript using the META tag.
There are browsers that do not support one or even both of these methods, therefore we will include an option for the user to manually move forward to the new location.
It seems a good idea to pause before the moving on to the new location, as this enables us to inform the visitor that the location has changed and request them to update any bookmarks they may have set. If we don't do this then they may revisit via the old location forever, or until the old pages are eventually removed and the redirection lost.
The META tag we will use is:
<META HTTP-EQUIV="Refresh">
Which should be placed between the <HEAD> and </HEAD> HTML tags. Currently the above example will not do anything as the content property is missing.
The content property has two values, the amount of time in seconds before refreshing, and an optional value specifying a URL to refresh the current page with.
The following example will load the new page after 10 seconds:
<HEAD> <META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://www.irt.org/articles.htm"> </HEAD>
The other method is to use JavaScript to change the current pages location after 10 seconds using the setTimeout and onLoad method.
The onLoad method is placed within the HTML <BODY> tag. The following example will invoke the redirect() function once the current page has totally loaded:
<BODY onLoad="redirect()">
Within the redirect() function we can use the setTimeout method to invoke another function after a delay. The following example invokes the go_now() function after 10 seconds:
<SCRIPT LANGUAGE="JavaScript"><!--
function redirect () {
setTimeout("go_now()",10000);
}
//-->
</SCRIPT>Now all we need is the go_now() function which changes the current location:
<SCRIPT LANGUAGE="JavaScript"><!--
function go_now () {
window.location.href = "http://www.irt.org/articles.htm";
}
//-->
</SCRIPT>Now we can combine all of the above to create an automatic redirect page:
<HTML>
<HEAD>
<TITLE>Automatic Redirection - Test</TITLE>
<LINK REL=STYLESHEET HREF="../../utility/main.css" TYPE="text/css">
<META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://www.irt.org/articles/js021/">
<SCRIPT LANGUAGE="JavaScript"><!--
function redirect () { setTimeout("go_now()",10000); }
function go_now () { window.location.href = "http://www.irt.org/articles/js021/"; }
//--></SCRIPT>
</HEAD>
<BODY onLoad="redirect()">
<H1>! Location Changed !</H1>
<BR>
<P>Please note the new location is http://www.irt.org/articles/js021/
<P>Ensure you update your bookmarks.
<P>This page will automatically redirect in 10 seconds.
<P>If this does not work for any reason use the link below:
<P><A HREF="index.htm">http://www.irt.org/articles/js021/</A>
</BODY>
</HTML>Why not try this example, which redirects you back to this page after 10 seconds.