openpolitics.com

When editing a page within my system, a user might decide to navigate to another website and in doing so could lose all the edits they have not saved.

I would like to intercept any attempt to go to another page and prompt the user to be sure they want this to happen since they could potentially lose their current work.

Gmail does this in a very similar way. For example, compose a new email, start typing into the message body and enter a new location in the address bar (say twitter.com or something). It will prompt like so:

Ideas how to replicate this? I’m targeting IE8, but would like to be compatible with FF & Chrome also.

..

<span class="pln">window</span><span class="pun">.</span><span class="pln">onbeforeunload </span><span class="pun">=</span> <span class="kwd">function</span> <span class="pun">(</span><span class="pln">e</span><span class="pun">)</span> <span class="pun">{</span>
  <span class="kwd">var</span><span class="pln"> message </span><span class="pun">=</span> <span class="str">"Your confirmation message goes here."</span><span class="pun">,</span><span class="pln">
  e </span><span class="pun">=</span><span class="pln"> e </span><span class="pun">||</span><span class="pln"> window</span><span class="pun">.</span><span class="kwd">event</span><span class="pun">;</span>
  <span class="com">// For IE and Firefox</span>
  <span class="kwd">if</span> <span class="pun">(</span><span class="pln">e</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
    e</span><span class="pun">.</span><span class="pln">returnValue </span><span class="pun">=</span><span class="pln"> message</span><span class="pun">;</span>
  <span class="pun">}</span>

  <span class="com">// For Safari</span>
  <span class="kwd">return</span><span class="pln"> message</span><span class="pun">;</span>
<span class="pun">};</span>