Just a Safari fragment identifier history demo…

See a demo of HistoryState, my new history and storage script.

This page demonstrates a Safari-compatible fragment identifier-based history system. It works using magic (and by "magic", I mean that it works by using document.body.scrollTop, and a lot of hacks). For more details, see this page: How it works in Safari.

I've added support for most other browsers to this page as well. My plan is to try to hack together a system that works as well as possible in as many browsers as possible. Once I have compatibility down, I'm going to focus on optimizing the code so that it can be ready for real-world use.

Demo:

Tested browsers:
All of these browsers have been tested and work with this script without any major problems. The version numbers here are just the ones I tested. If you get this to work in a different version of one of these browsers, let me know.

• Internet Explorer: >5.5 Windows, 5.2 Mac
• Firefox: >1.0.7 Windows and Mac (PowerPC)
• Safari: 2.0.3 (PowerPC)
• Konqueror: 3.5.3 Linux (but it forgets history states when you leave the page)
• Opera: 9.0b2 Windows (8.54 doesn't support history.navigationMode, and tends to stop polling for location.hash changes if the user goes to another site then returns using the Back/Forward buttons. I haven't found a reliable workaround for this bug yet.)
• Netscape Navigator: 4.8 Windows

Known Safari issues:

• Sometimes the first history entry you make no longer works when you leave the page then return to it by clicking the back button. If you click "back" until the address bar reflects the correct name of this history entry, the "Value from fragment identifier" does not update. If you type "javascript:alert(document.body.scrollTop);" in the address bar, an incorrect value is displayed (usually in the hundreds). I'm not sure what's causing the scrollTop to be changed.
• Crashes, especially immediately after adding history entries.
• Doesn't work on pages with GET-like parameters in their URL. This is due to the method used to force Safari to add history entries for the fragment identifiers (to see how this method works, see the dmc_scroll_API.formSubmit function in the javascript source code).