Alex Rivera | Logout

How to make the browser back button disregard hash tags?

Asked 2012-01-05T18:25:57.317
11

I have a website that uses hashes to open/close some tabs and layers on the current page. The reason behind using hashes is, that if a user visits another page via a link and then goes back to the original page all tabs and layers should open up exactly as they were when leaving that page.

The problem is, that while being on the first page and using the browser back button, only the hashes change and the user must click multiple times to actually go back to the last 'real' page.


Can that behaviour be changed? Here's an example workflow:

So I am visiting a page:

start.php > click link > processing.php > click tab, hash changes >

processing.php#1 > click a different section on the page, hash changes to >

processing.php#1-2

Now when I hit the browser back button I want to go back to:

start.php NOT processing.php#1


BUT! When I go from:

processing.php#1-2 > navigate to > otherpage.php

and then hit the back button from there, I need to go back to:

processing.php#1-2

in order to restore the open tabs and layers.

Is that possible!? Any help is appreciated!

Edit
Report

2 Answers

3

That's intentional browser behavior, and is the proper use of hash tags. As a result, I suggest considering whether the javascript that is using those hash tags is the problem, and to change it to a different storage method. Effectively, you can just use a globally available javascript variable for that purpose, because no page reload will be happening so the variable will persist.

window.stage = 'start';

// Another stage
window.stage = 'onfire'

You'll still want to suppress the standard behavior from clicks for js elements, of course.

Alternatively, if you want the stages to be stored, but not "navigatable", you can consider using localstorage on more modern browsers.

EDIT: (based on the new information)

The thing that you are trying to do is an extremely common scenario in webdev because pages don't save much by way of their user's state/information.

You want to store information about what your users have completed, what stage they are at in a process. Even when they have navigated away from a page.

There are somewhat limited number of places to "store" data: the hash, localStorage, cookies, or client-side, and that's about it. If I were a user of your page, I suspect that I would want my data stored regardless -how- I navigate through your app.

So I suggest considering a better location for storing the state of your webpage than the hash, which is generally designed for navigation. If they're going to be logged in via php, just store it via php to the database. If not, then store it to localStorage where available and fallback to cookies, or just use cookies.

Your end navigation may look as tangled as this: start page > processing page > any other page > processing page > leave the site > return to processing page

But each time they return to the processing page, their

answered 2012-01-05T18:33:12.520
0

You can count how many hashes you've clicked since you've loaded the page, then use that count with history.go( - countHashes) to go back to your page.

answered 2013-02-13T14:02:05.837

Your Answer