Detecting back/forward button use for fragment identifers

[whapts3]

I'm putting together a rather dynamic page (AJAX/all-that-mess).

So... to go between different sorts of content on the page, I have it
set up something like this.
<a href="#10" onclick="loadFragment()"> ... </a>
<a href="#20" onclick="loadFragment()"> ... </a>

where loadFragment is a function which does something based on the #20
which is now appended to the document's .location.

This works fine for bookmarks and links (I have an onLoad handler that
checks the fragment as well) but does nothing for people who want to use
the Back button. Is there any way that I can get an explicit
notification when the document's location changes? Or should I try to
poll document.location for changes?

 

[Randy Webb]

whapts3 said the following on 5/7/2006 3:42 PM:

I'm putting together a rather dynamic page (AJAX/all-that-mess).

So... to go between different sorts of content on the page, I have it
set up something like this.
<a href="#10" onclick="loadFragment()"> ... </a>
<a href="#20" onclick="loadFragment()"> ... </a>

where loadFragment is a function which does something based on the #20
which is now appended to the document's .location.

This works fine for bookmarks and links (I have an onLoad handler that
checks the fragment as well) but does nothing for people who want to use
the Back button. Is there any way that I can get an explicit
notification when the document's location changes? Or should I try to
poll document.location for changes?

You could try polling it but it won't be reliable and could get messy
with user interaction interrupted. As for the Back button, you didn't
ask so I assume you know that you can not detect when the Back button
was clicked.

Otherwise, you may consider building your own History trail with custom
Back and Forward buttons, not changing the URL at all, and when a user
clicks Back on the browser they go back where they originated.

 

[whapts3]

You could try polling it but it won't be reliable and could get messy
with user interaction interrupted.

I've tried polling. It seems to work fairly well in IE6 and FireFox
and... a little bit of Opera, kinda, sorta.

http://fennecfoxen.org/misc/photo/reynolda/

I have a polling function that's operating on a window.setTimeout(); -
the problem is that when Opera (v8.5) visits an image, it leaves the
page and the timeout dies, and it is not resumed when they return.

To help evade this, I've put an operation to restart the polling task
whenever you click on a link, but that still leaves the Back button
broken for Opera after you've visited a picture and you haven't clicked
on another link since. I might evade this further in my next version by
putting the image inline with the page- but still, the user might visit
another site and come back and the loop would not be running. My other
browsers (FireFox and IE6) seem OK -- well, Internet Explorer doesn't
deem anchor-changes worthy of a new history entry, so it solves the
problem in another, roundabout fashion... so...


Is there a way to reliably restart the polling operation when Opera
reloads the page?



Hmm. I guess another option here is to try and detect user-agents and
send Opera something which will force it to refresh every time... I
don't really like the sound of that, though, and I've seen Opera be
extremely stubborn about not-reloading stuff...

 

[whapts3]

To help evade this, I've put an operation to restart the polling task
whenever you click on a link, but that still leaves the Back button
broken for Opera after you've visited a picture and you haven't clicked
on another link since.

Or maybe it doesn't. I just tried things again and they seemed to work
so I have no clue what's going on anymore and will try again in the
morning when I'm more awake.