Hello, please sign in or register
You are here: Home

Browser navigation in an XHR world

Test

Click these #red, #green, #blue...  this background-colour should change.

Now try: refresh, back, forward and the color should continue to change.



Why? 

Well, in an XHR, AJAX web application world small pieces of page content are pulled upon request. But users like to copy and share URL's, move forward and back. But how does a browser know what constitutes an event, a point to bookmark / add to the browser history.

By adding a hash '#'  in our example we were able to: navigate through the three colours without reloading the whole page; Use the browser back and forward and refresh buttons and show the correct colour which is in the URL.


Click and reload events

This script adds events to the onload and click triggers.
CODE
<script>
window.onload = function(){ 
function changecolor(){   
     document.getElementById('changecolor').style.backgroundColor = window.location.hash.replace('#', '');
}
changecolor();
$('a[href^=#]').click(function(){ window.location.hash = this.href.substr(this.href.indexOf('#')); changecolor(); });
}
</script>

However we're adding events to the click events and the onload event... neither of which get triggered when the user navigates using the browsers back/forward buttons in the toolbar.



Back and Forward

There is no overwhelming support for onload hash trigger or otherwise in any of the main browsers when navigating previous/next page. 

So at present we have to fake it.. Solution adopted from AcidMartin, whereby we poll the url for changes.

var uri = window.location.hash;
setInterval(function(){
if(uri===window.location.hash)
return; // nothing to do

// trigged hashchange

// update uri with new hash
uri = window.location.hash;
},100);

... urgh, i hate fake triggery with setInterval and setTimeout.

Finished Code

<script>
window.onload = function(){
function changecolor(){
     document.getElementById('changecolor').style.backgroundColor = window.location.hash.replace('#', '');
}
changecolor();
var winhash = window.location.hash;
setInterval(function(){
    if(winhash ===window.location.hash)
          return; // nothing to do

   // trigged hashchange 
   changecolor();
   // update uri with new hash
    winhash = window.location.hash;
},100);
}
</script>

Fixing IE History

There are solutions out there which makes the navigation buttons work in IE7 and older. Everytime an FRAME src changes in IE the state is added to the browser Navigation so we can use an arbitary iframe to update the browser navigation... however there is a horrible double clicking sound from the browser.

Browsers arn't all there yet.

IE8 leads the way and implemented the window.onhashchange event which removes the need for faking it with setInterval. FireFox announced it will implement onhashchange in 3.6

Another newcomer is the pushState() function for adding history "states" to the browser HTML 5 specs include the window.history.pushState(data,title[, uri]); Enabling programmers to decide what warrants a bookmark (history entry, presumably replaces the #). However i'm sceptical of what 'data' parameter is for and whether this is to trigger a user-defined method: which begets the question why is it called 'data'?
Or, if it is data (scalar,array,object,..), then why in an XHR environment can we not store the data in our user-defined variables as normal or will they be destroyed if navigating away from the page? If so... why!? And what if i want to share a link to the page with my friend. How do i pass my sessions 'data'?


Comments

cmoutlet
s ralph lauren outlet Ray Ban Sunglasses,Ray Ban Outlet,Ray Ban Sale,Cheap Ray Bans,Cheap Ray Ban Sunglasses,ray ban sunglasses outlet,ray ban,rayb...
Created 21/10/15
oakleysunglasses
“I canada goose outlet think it doesn’t swarovski jewelry bode very
Created 21/01/16
clibin
Tyrion 5c cases watched her ray ban sunglasses read. His timber...
Created 18/04/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
chenyan
Bond grinned. pandora-bracciali.it "We bcbgmax.in.net only chaussure...
Created 15/06/16
Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share