Your generous donation allows me to continue developing and updating my code!
First, open this page in a new window or tab, to clear any current window or tab history. Make your window wide enough so that you can see the full URL in the address bar, with some extra space left over.
- Hash should change from #1 .. #10, once every 250ms.
- Browser title should change from "Back Button Test 1" .. "Back Button Test 10" at the same time.
- Ten new history entries should be added.
- Verify that pages "Back Button Test 0" .. "Back Button Test 9" are now in the history.
- Hash should change from #10 .. #1 then disappear.
- Browser title should only change from "Back Button Test 10" .. "Back Button Test 1" if window.onhashchange is supported.
- History entries "Back Button Test 9" .. "Back Button Test 0" should be removed.
Notes
- No new history entries are added in IE6/7, so there's nothing to "go back" to.
- Only IE8 and FF 3.6 support window.onhashchange.
- Chrome 3 / Chromium randomly "loses" history entries. Chromium issue 1016
The code
var delay = 250;
// Set the browser title.
function set_title( i ) {
document.title = document.title.replace( /\s*\d*$/, '' ) + ' ' + i;
}
// Add new history entries by changing window.location.hash, in an
// asynchronous loop.
function add_history_entries( start, end ) {
(function loopy(){
window.location.hash = '#' + start;
set_title( start );
++start <= end && setTimeout( loopy, delay );
})();
};
// Go back in the history, in an asynchronous loop.
function go_back( i ) {
(function loopy(){
window.history.go(-1);
--i && setTimeout( loopy, delay );
})();
};
// Some window.onhashchange stuff. Not really important here.
function handler() {
var i = window.location.hash.replace( /^#/, '' );
set_title( i );
};
if ( window.addEventListener ) {
window.addEventListener( 'hashchange', handler, false );
} else if ( window.attachEvent ) {
window.attachEvent( 'onhashchange', handler );
}