Cancel / Abort / Confirm HTML 5 Status Change Event (onpopstate)

Question

With the window unloading event, you can show the user a confirmation dialog box, say, in a situation where there is a constant request that you expect to complete, and moving from the page will terminate this request.

Is there a way to accomplish this using the onpopstate HTML5 history API? Or in any other way with the same result?

Answer 1

I think you could change the behavior of pushState to ask for confirmation before pushing a new state:

// Store original pushState var _pushState = window.history.pushState; // Some bad global variable to determine if confirmation is needed var askForConfirm = true; // Modify pushState behavior window.history.pushState = function() { if(!askForConfirm || confirm('Are you sure you want to quit this page ?')) { // Call original pushState _pushState.apply(window.history,arguments); } }; 

Answer 2

I don't know if this helps in your situation, but Sammy.js, a popular hash routing library, has a before handler. I used it in my application to write a previously available hash, and if it is a hash, I want them not to go, returns false, will keep them on this page. You still need to rewrite the url to display the previous page, but it seems to work.

See my answer in this other section for more details.