Dynamic HTML
Redirect for DHTML page
Grizzly WebMaster home
 Grizzly WebMaster (HOME) >> Dynamic HTML >> Redirect for DHTML page
See Also
"Page Redirection - JavaScript" for more techniques of redirecting from one page to another.
This page demonstrates a good method for redirecting your visitor based on whether their browser supports dynamic-html or not.

This script uses the technique of defining more than one implementation of the same function, each within a separate JavaScript version block.  Only the function that is in the last processed script block will be used.  For that reason it is important to order the script blocks in ascending order according to JavaScript version.

Our example will redirect to one of three other pages.  One is a target for browsers that don't support JavaScript at all (or have JavaScript turned off), another is an implementation of a static JavaScript clock and lastly our dynamic clock (mainly because I already had these handy).

Save Source
Right mouse button here and select "save target as" to save the source

Obviously before using these functions you would want to remove the verbose comments.

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>Redirect DHTML Page 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.
-->
<meta http-equiv="refresh" content="2; URL=noclock.htm">
</noscript>
<script language="JavaScript">
<!--
function timedRedirect()
{
    //  This form of changing location "does" add to the
    //  browser's history, but since we are dealing with
    //  JavaScript 1.0 we can't do much about it.
    //
    window.location.href = "staticclock.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( "timedRedirect()", 2*1000 );
}
//-->
</script>
<script language="JavaScript1.1">
<!--
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( "staticclock.htm" );
}
//-->
</script>
<script language="JavaScript1.2">
<!--
//
//  Browsers that support JavaScript1.2 also support DHTML.
//
function doRedirect()
{
    //  This implementation of the function will be executed
    //  for browsers that support DHTML.
    //
    window.location.replace( "dynamicclock.htm" );
}
//-->
</script>
</head>

<body onload="doRedirect()">

<!--
    Use the "onload" event to start the redirection process.
-->

<!--
    Provide a link that the user can click on just in case
    there is a problem with the other redirection methods.
-->
<script language="JavaScript">
<!--
    document.writeln('<p>Loading <a href="staticclock.htm">Static Clock</a></p>');
//-->
</script>
<noscript>
<p>Loading <a href="noclock.htm">No Clock</a></p>
</noscript>
<p>In approx. 2 seconds the redirection target page should load.<br>
If it doesn't please select the link above.</p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             </body>

</html>
Service Provided by Bear Consulting Group Last modified: 25 May 2009
Copyright 2001 Bear Consulting Group