Inside Technique : Rewriting History
By Scott Isaacs

This article is all about a very simple concept, redirecting users. I decided to write this article after visiting sites that add both the page redirecting me and the new page to my history. This happens when a page loads on the client, and there is either a line of javascript or a meta refresh that instantly transports you to a new page. If done incorrectly, when you try to hit the back button you are immediately redirected back to the same page. One work-around is for users to build up their dexterity and double click the back button really fast to bypass the page or be sophisticated enough to use the new drop-down back navigation available on the latest browser's toolbar.

A better work-around is to write you scripts more intelligently. Below we list the wrong way to redirect the user:

<SCRIPT>
// Wrong way to automatically redirect
window.location.href = "newPage.htm"
</SCRIPT>

The other way redirection often works is with META REFRESH. META REFRESH has the same problems as the above. When using META REFRESH for splash screens ask yourself if you really need that page added to the history. So we add META REFRESH to the list of wrong ways to simply redirect the user when used by itself:

<!-- Send the user after 2 seconds -->
<META HTTP-EQUIV="Refresh" CONTENT="2; http://www.insideDHTML.com/home.asp">

As setting the href, the original page is added to your history.

The Fix

We recommend one of two solutions. First, we have a short script that solves this problem. JavaScript 1.1 (supported by Netscape 3.0 browser and later and Internet Explorer 4.0) added a method to the location object, replace. This method replaces the current entry in the history with the new document. So, when it comes to requiring a redirection, try writing it as follows:

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
  var version = parseInt(navigator.appVersion)
  // replace is supported
  if (version>=4 || window.location.replace)
    window.location.replace("newPage.htm")
// -->
</SCRIPT>
The document, <A HREF="newPage.htm">Scott's Home</A> has moved.

The purpose of the explanation is to cover browsers that do not support JavaScript 1.1. For those browsers, the navigation is not automatic and this page is added to the history. However, since the navigation is manual, the user can easily back through this page. For browsers that support JavaScript 1.1, it is as if this page never existed.

The second solution is a compromise for sites that believe they must have automatic redirection whenever possible. For those sites, we use a combined approach:

<META HTTP-EQUIV="Refresh" CONTENT="1; http://www.insideDHTML.com/home.asp">
<SCRIPT>
<!--
  var version = parseInt(navigator.appVersion)
  // replace is supported
  if (version>=4 || window.location.replace)
    window.location.replace("newPage.htm")
  else
    window.location.href = "newPage.htm"
// -->
</SCRIPT>
The document, <A HREF="newPage.htm">Scott's Home</A> has moved.

In this approach, we first try to move to the new page using the replace method. If the browser does not support replace, then the location's href property is set. If JavaScript is not supported, the META element will navigate the user after 1 second. If META REFRESH is not supported, the user must manually navigate. This script works as expected in the majority of the browsers and only causes the history problem in a few browsers.

Writing into the history

Using the document.open() and document.write() methods also effects the history. Contents written into a window represent a new document in the history. There are times where you may want to dynamically generate a document that replaces the current page. Internet Explorer 4.0 supports an extra argument on the open() method that makes the new document work like the replace method replacing the current page in the history. This argument has no effect on other browsers:

<SCRIPT>
<!--
  document.open("text/html","replace") // "replace" the current document in the history
  document.write("Hello World")
  document.close()
// -->
</SCRIPT>

We hope this helps you understand history a little better and see that with JavaScript, it is possible to rewrite history.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.