news

Catching browser back

Today we searched for a solution to catch the browser back button.

The problem is, that the browser per default has no way to catch the back and forward actions. Also the browser does not allow to modify the browser history.

But there are two things you can do:

  1. call location.replace to load a diffrent url and replace the history of the current page.
  2. add a hash (like its used for anchor links) to the url with location.hash='hash'

Basically the idea was to add a hash when the page is loaded. When the user then clicks the browser back button, the url just changes back to the url without the hash. Then all you need to do is to detect that url change and react like you want (e.g. set a new location.href)


Here is the example

 

$(function(){

var lastjavascripthash='';

//if the current url has a hash on dom ready - than the user loads this url directly in browser
if (location.hash) {
alert('you navigated to this link using the browser address!');
lastjavascripthash=location.hash;
}
//just add a dummy hash:
lastjavascripthash=location.hash='#loaded';

//optional - when clicking the links append the hash to the url:
$('#tostep1').click(function() {
lastjavascripthash=location.hash='#step1';
});

//do regular check if the hash in the location still fits the last hash that was set via a valid javascript call
// if not it means someone else modified the hash - typically the browser back
setInterval(function() {
if (location.hash != lastjavascripthash) {
alert('you navigated to this link using the browser back!');
lastjavascripthash=location.hash;
}
}, 300);
}

Since the loaction.hash declaration is not interpreted by all browsers, a better way is to use one of the history javascript plugins.

This is the case in this modified example
(using jquery.history.js Links: plugins.jquery.com/project/history; nix.lv/history/)

var browserback = {
lastjavascripthash: '',

setLastHash: function(hash) {
browserback.lastjavascripthash=hash;
},
historyChangeHandler: function(hash) {
if (browserback.lastjavascripthash != hash) {
alert('you propably used browser back!');
browserback.setLastHash(hash);
}
},

disableBrowserBack: function() {
$.history.init(this.historyChangeHandler);
var hash=new Date().getTime()+ Math.floor(Math.random()*1000)
browserback.setLastHash(hash);
$.history.load(hash);
}
}


$(function(){
browserback.disableBrowserBack();
}

blog comments powered by Disqus
  1. Plastic Surgery London http://matthewbridgesmd.com 05.05.11 16:48

    I agree with Chris the user software should not be meddled with as it could lead to other compilations.

  2. Jan http://www.webdesign-seo24.de 25.04.11 08:28

    Vielen Dank für die Entwicklung

  3. Anna http://www.neu-reich.de 19.02.11 22:02

    Super Sache - Typo3 ist eben gut!

  4. Gaurav Huria 08.06.10 14:55

    Sorry, the previous post of mine has some typo mistake. Sending again:

    It is working perfectly with anchor/a/hyperlink tag. But i have a problem i.e. i kept input buttons instead of anchor/a/hyperlink tag. It works fine when i press Alt + Left Arrow for the first time, but on second time it postbacks.

  5. Gaurav Huria 08.06.10 14:52
  6. Vielen Dank für diesen Workaround. Das erhöht die Usability enorm und hat uns auch schon immer interessiert, doch dank euch brauchen wir das ja jetzt glücklicherweise nicht mehr entwickeln. Thanks!

  7. Chris 26.10.09 09:39

    Good point.

  8. Daniel 22.10.09 14:31

    Sure. But detecting the browser back could be the first step to support it.

    That was actually the problem we need to solve here.

  9. Chris 22.10.09 11:02

    Instead of catching the back button one should think of how to support it. It's generally not a really good idea to intervent in the user's software. Think one step further, intercepting the browser's close-button to get more time-per-visit?

  10. Daniel 21.10.09 22:40

    Just found more ideas here:
    http://webdevlopementhelp.blogspot.com/2009/07/disable-back-button-of-browser.html

blogroll