Playing on the frontier » html http://siphon9.net/loune Wed, 18 May 2011 12:10:37 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Detecting the back (or refresh) button click http://siphon9.net/loune/2009/07/detecting-the-back-or-refresh-button-click/ http://siphon9.net/loune/2009/07/detecting-the-back-or-refresh-button-click/#comments Sat, 11 Jul 2009 09:21:35 +0000 Loune http://siphon9.net/loune/?p=35 While developing a web app, I came across an interesting problem: I had a page which had a button to perform an action. If the button is clicked, the action request is sent to the server side script and redirected back to the same page but with a message displayed on the top of the page (ie Your post has been submitted).

If you then navigate to another page but click back, you would see the same page with the same message popping up. I want to detect that we’re clicking back so we will hide the message. There are plenty of solutions in google, but a lot of them involved setting a cookie (what if cookies are disabled), or a server side script detecting referer (what if page is still cached?), or using time by detecting if the server page load time and the current time differs by a large amount (what if client time is wrong?). Without an ideal solution, I set about finding a new solution. Surely it can’t be hard to detect that we’ve already been in that same page. If only there was a way to save a flag just for that page and for the duration of the page session. I tried modifying the DOM, but that gets reverted when you click back. The onload event also get called again, so you can’t use that to differentiate.

I then remembered that at least on recent browsers, there exists a functionality in forms that retained form field information if you clicked back – very handy if you’re submitting a post and the connection died, you can just click back and your long winded post would be intact.

Solution – Use a hidden form field to detect that we’ve been on this page before

Building on this idea, it’s possible to temporarily store a flag on a hidden form field that says, yep I’ve been on this page before. Here is a code snippet:

<html>
<body>
Try
<a href="http://www.google.com/">jumping to another page</a>
</body>

<script>

document.write("<form style='display: none'><input name='__detectback' id='__detectback' value=''></form>");

function checkPageBackOrRefresh(load_id) {
if (document.getElementById('__detectback').value == load_id) {
return true;
} else {
document.getElementById('__detectback').value = load_id;
return false;
}
}

window.onload = function() {
if (checkPageBackOrRefresh('tt'))
alert('You clicked back or refreshed the page');
}

</script>

</html>

Unfortunately, this solution does not work in some browsers where “fast back” (ie, fbcache in firefox) is enabled, as the fast back stores the scripting state so a onload does not trigger again.

The script should work fine with IE7 and IE8. With Firefox, it only works on certain pages. These pages seems to be pages that link to heavy javascripts (ie jquery?).

With fbcache enabled browsers, a possible solution would be to hide the message at the event onbeforeunload so it will not appear even when clicking back.

]]> http://siphon9.net/loune/2009/07/detecting-the-back-or-refresh-button-click/feed/ 0