Saving work before new URL in Address Bar Executed

Question

I have a web page where people can go and design things, let's say furniture layout. There are buttons on the page to save the work, but I don't have any protection if someone just goes up and puts a new URL in the Address bar. Then the browser (say Chrome 34.0) throws out all the current work and loads the new page. How can I force Chrome to open the new URL in a new tab, or at least catch the exit from the current page so I can save the work for the user?

Thanks

Answer 1

You can create a javascript popup that runs when the user has modifyed the work with this line:

window.onbeforeunload = function(){ return 'All unsaved Work will be lost.' }

The popup will look something like this

Confirm Navigation

All unsaved Work will be lost.

Press OK to continue, or Cancel to stay on the current page.

Use this line to prevent the popup once the user saves:

window.onbeforeunload = null;