JavaScripts
Page Redirection
Grizzly WebMaster home
 Grizzly WebMaster (HOME) >> JavaScripts >> Page Redirection
See Also
"Page Refresh/Reload" for techniques of reloading a page.
Page redirection is used to redirect/forward a page visitor to another page, such as when a page or site has been moved.  We discuss three versions:

JavaScript Redirect

See Also
"Redirect for DHTML Page" for techniques of redirecting based on DHTML capabilities. "ASP Redirection" explains server requested redirection.

The preferred redirection method uses a technique that will replace the redirection-page with the target-page in the visitor's page history.

Our example is a page similar to one that you might use to point visitors from an old page/location to a new page.  Please note that we take great care to make sure that this page works for both older browsers as well as later browsers.

We do use the "refresh" meta-tag nested in a <noscript> block as a backup method to the JavaScript for browsers that do not support JavaScript at all.

It should be noted that when this script executes (depending on network speed and your system speed) you may not see the redirection page for more than a fraction of a second (if at all).

See this script in action.


<html>

<head>
<title>Redirection Example</title>
<noscript>
<!--
    meta-tag "refresh" is provided for those browsers that
    do not support JavaScript.  Please note that the time
    delay is greater than zero.

    Notice that this is nested within a "noscript" block.
    Which means that browsers that support JavaScript will
    not "see" the refresh meta-tag.
-->
<meta http-equiv="refresh" content="2; URL=redirectiontarget.htm">
</noscript>
<script language="JavaScript">
<!--

// This is the file to which we will redirect.
//  IF this is changed please remember to change the
//  entries in the meta-refresh as well as in the
//  link in the document body.
//
//  sTargetURL is declared in the JavaScript 1.0 version
//  code block but it will be available in all later version
//  JavaScript code blocks.
//
var sTargetURL = "redirectiontarget.htm";

function doRedirect()
{
    //  The JavaScript 1.0 version of this function supports
    //  browsers that don't have the ability to replace this
    //  file in the browser history.  As a result we want to
    //  make sure that we briefly delay so when the visitor
    //  is moving back through their browser-history they
    //  will have time to press the back-button on this page
    //  before the script moves them to the redirection
    //  target page again.
    //
    //  Notice that we have the timeout the same amount as in
    //  the meta-refresh version.
    //
    setTimeout( "window.location.href = sTargetURL", 2*1000 );
    
    //  The 2*1000 equals 2 seconds.
}

//-->
</script>

<script language="JavaScript1.1">
<!--
//  Browsers that support JavaScript 1.1 will replace the
//  earlier definition of doRedirect defined in the
//  JavaScript 1.0 code block.  Make sure that this
//  definition appears after the 1.0 definition in the file.
//
function doRedirect()
{
    //  JavaScript 1.1 added the 'replace' function on the
    //  location object so we can change locations without
    //  adding to the browser's history.
    //
    window.location.replace( sTargetURL );
}

//  Just to be a bit fun -- we call the doRedirect function
//  directly here.  This means that it is called before the
//  page fully loads.  If your visitor is using a later
//  browser, then they will most likely not even see any of
//  "this" page at all.
//
doRedirect();

//-->
</script>

</head>

<!--
    Use the "onload" event to start the redirection process.
-->
<body onload="doRedirect()">

<!--
    Provide a link that the user can click on just in case
    there is a problem with the other redirection methods.
-->

<p>Loading <a href="redirectiontarget.htm">redirection target</a></p>
<p>In approx. 2 seconds the redirection target page should load.<br>
If it doesn't please select the link above.</p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              </body>

</html>
Here is exactly the same JavaScript redirection file but without all of the comments.  This is provided to let you see that this really is a small and clean solution.

<html>

<head>
<title>Redirection Example Sans Comments</title>
<noscript>
<meta http-equiv="refresh" content="2; URL=redirectiontarget.htm">
</noscript>
<script language="JavaScript">
<!--
var sTargetURL = "redirectiontarget.htm";

function doRedirect()
{
    setTimeout( "window.location.href = sTargetURL", 2*1000 );
}

//-->
</script>

<script language="JavaScript1.1">
<!--
function doRedirect()
{
    window.location.replace( sTargetURL );
}

doRedirect();

//-->
</script>

</head>

<body onload="doRedirect()">

<p>Loading <a href="redirectiontarget.htm">redirection target</a></p>
<p>In approx. 2 seconds the redirection target page should load.<br>
If it doesn't please select the link above.</p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </body>

</html>

Timed Redirect with JavaScript

Another version based on the JavaScript redirection method.  If you want "all" browsers to have a timed delay before changing to the target page.

See this script in action.


<html>

<head>
<title>Timed Redirection Example</title>
<noscript>
<meta http-equiv="refresh" content="5; URL=redirectiontarget.htm">
</noscript>
<script language="JavaScript">
<!--

var sTargetURL = "redirectiontarget.htm";

function doRedirect()
{
    setTimeout( "timedRedirect()", 5*1000 );
}

//  There are two definitions of 'timedRedirect', this
//  one adds to the visitors page history.
function timedRedirect()
{
    window.location.href = sTargetURL;
}

//-->
</script>

<script language="JavaScript1.1">
<!--

function timedRedirect()
{
    window.location.replace( sTargetURL );
}

//-->
</script>

</head>

<body onload="doRedirect()">

<p>Loading <a href="redirectiontarget.htm">redirection target</a></p>
<p>In approx. 5 seconds the redirection target page should load.<br>
If it doesn't please select the link above.</p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       </body>

</html>

"refresh" meta-tag

The traditional method for redirecting a page is to use a "refresh" meta-tag.   The biggest problem with using this method is that the redirection page is included in the visitor's page history, and thus when the user selects the "back" button and reaches the redirection page again they will be immediately returned to the redirection-target page.

The preferred redirection method is "JavaScript Redirect"

See this script in action.



<head>
<!--
    The "refresh" meta-tag's content identifies the number of
    seconds to delay and the location (URL) to load.

    When using the refresh meta-tag you should not specify "0"
    for the delay time because your site's visitor will have
    trouble moving "back" through their browser's history.
-->
<meta http-equiv="refresh" content="5; URL=redirectiontarget.htm">
</head>

Service Provided by Bear Consulting Group Last modified: 25 May 2009
Copyright 2001 Bear Consulting Group