Question

I have a Flex application where I want to give the user a warning if they hit the back-button so they don’t mistakenly leave the app. I know this can’t be done entirely in Actionscript due to cross-browser incompatibility. What I’m looking for is just the Javascript implementation to catch the back-button.

Does anyone have a simple non-library cross-browser script to catch the back-button? I can’t seem to find a post that shows an example.

Answer 1

You can use the window.onbeforeunload event.

window.onbeforeunload = function () {
   return "Are you sure you want to leave my glorious Flex app?"
}

The user can press okay to leave, cancel to stay.

As you stated, this throws the alert any time the page changes. In order to make sure it only happens on a back button click, we have to eliminate the alert message whenever they’re leaving the page from natural, expected sources.

var okayToLeave = false;

window.onbeforeunload = function () {
   if (!okayToLeave) {
   return "Are you sure you want to leave my glorious Flex app?"
   }
}

function OkayToLeave() {
    okayToLeave = true;
} 

You’ll have the responsibility of setting the variable to true whenever they click a button or link that will take them from that page naturally. I’d use a function for unobtrusive javascript.

Set your event handlers in the DOM ready:

referenceToElement.addEventListener('onClick', OkayToLeave(), false);

This is untested, but should point you in the right direction. Although it may seem like a nuisance to do this, I imagine it’s more complete functionality. It covers the cases where a user may click on a favorite, or be redirected from an external application.