Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

Redirect without breaking the Back button

Sometimes we need to redirect users from an old page to a new page. Or as what sometimes happens with church web sites, from a single page for one particular ministry, to an entire subsection of pages. The only problem is client-side redirects tend to break the user’s back-button functionality.

Take for example the following snippet which one might use on a page for one’s youth ministry, let’s call it uth.html for the sake of argument. What we’ve done is put a meta tag atop the page so it will redirect to a subdomain which contains a web log chock-full of youth-related pages:

<meta http-equiv=”refresh” content=”0;url=http://youth.redlandbaptist.org”>

While the above example works, it can also be a bit disorienting to see one screen come up and then flash away to something else. Combine this with the loss of the back button and you can frustrate a user big league. Especially if he or she hit a link to your redirecting page accidentally.

A better way is to leave the page uth.html where it stands, and instead modify your .htaccess page to change things on the server side. For example:

RewriteEngine on
RewriteRule /uth\.html$ http://youth.redlandbaptist.org

Not only does this technique keep the client’s back-button happy, but it is equally useful for those times where you’ve redesigned your site, and are removing old content, or moving old content to a new subdirectory.

* update * to the individual who used my comment section for spamvertising, I’ve forwarded a complaint to your upstream service provider. Its no wonder paypal shut you guys down.

5 Comments

  1. * MESSAGE DELETED *

    Thanks Wolfie, but we do not allow people to use our comment sections for unsolicted commerical advertising, otherwise known as spam.

    I’ve also informed your upstream provider of the abuse.

  2. If you don’t have access to your server, which is often the case when your site is hosted, you can use location.replace in the onLoad of the page. This does load two pages quickly, but it doesn’t break the back button like the meta refresh.

  3. Just a second note in favor of location.replace() in javascript.

    In general, if you don’t want the current page to show up when the user clicks the background button, use

    location.replace(newurl);

    If you DO want the current page to show up when the user hits the back button, use

    location = newurl;

    Specifically, the consequence of this is that location.replace() should be used in automatic redirects (otherwise you get a site which a user can’t back out of – they go back to the automatic redirect and get bounced forward again), and “location =” should be used when you’re using javascript to change the page in response to user action. (But don’t do that, since you should be using standard links or form elements for navigation in any case)

    Incidentally, although a site the user can’t back out of and a page which the user can’t go back to may seem at first glance to be a good idea, they aren’t. Really. Your page is not so important as to hijack the user’s browser.

  4. Re: comment by Wolfie.

    Woa. Don’t mess with Mean Dean. He don’t mess around.

  5. In general, it’s not a great idea to have something as vital as your site’s navigation dependent on the client’s configuration. If your visitor disables javascript and you use location.replace, they’ll be stuck looking at your old page. Perhaps a much better solution would be to use the HTTP “Location:” header to redirect the client to your new page. This option should work for servers that don’t support mod_rewrite and clients that don’t support javascript. More info at http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.30