Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a system where I want to check with the user if they're sure they want to leave the page once a dirty flag is set.

I'm using the following code - In FireFox, I can look at the page source through FireBug and the tag correctly has the onbeforeunload attribute inserted in it.

In Chrome and FireFox, this doesn't happen though and I'm able to navigate away from the page without any warning at all. The jQuery line to update the body tag is definitely being executed, it just isn't performing it.

if ($("body").attr('onbeforeunload') == null) {
    if (window.event) {
        // IE and Chrome use this
        $("body").attr('onbeforeunload', 'CatchLeavePage(event)');
    else {
        // Firefox uses this
        $("body").attr('onbeforeunload', 'return false;CatchLeavePage(event)');
Any ideas how to proceed from here?
                I was able to use   $("body").css("margin", "50px"); and  $("body").attr("test", "hello");  it just seems that I can't set the onbeforeunload attribute now...
– Graeme
                Nov 26, 2009 at 10:49
you cannot abort page unload by returning false. you must return string that will be shown to user in a message box, and he decides if he want to leave or stay on the page (by selecting either 'OK' or 'Cancel' button), so you need to write your code like this:
 window.onbeforeunload = function() {
    return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse...
  <script type=\"text/javascript\">
        var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
        var leave_message = 'You sure you want to leave?'
        function goodbye(e) 
            if(dont_confirm_leave!==1)
                if(!e) e = window.event;
                //e.cancelBubble is supported by IE - this will kill the bubbling process.
                e.cancelBubble = true;
                e.returnValue = leave_message;
                //e.stopPropagation works in Firefox.
                if (e.stopPropagation) 
                    e.stopPropagation();
                    e.preventDefault();
                //return works for Chrome and Safari
                return leave_message;
    window.onbeforeunload=goodbye;
    </script>
                Omg omg! You saved my day. It seems that krcko is wrong with his assumption: "You cannot abort page unload by returning false". Or he's not precise enough. It looks that (with IE only) if the "onbeforeload" event returns false, nothing is displayed. So the code I'm working on was returning false, and no message with IE, but always a message displaying "false", and asking to leave. Your solution works for all browsers. (Thank you)³².
– Olivier Pons
                Jun 26, 2013 at 8:44
function wireUpEvents() {
var dont_confirm_leave = 0; 
var leave_message = "You sure you want to leave ?";
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave !== 1) {
if (!e) e = window.event;
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
//return works for Chrome and Safari
return leave_message;
window.onbeforeunload = goodbye;
document.onkeydown = function () {
switch (event.keyCode || e.which) {
case 116 : //F5 button
validNavigation = true;
case 114 : //F5 button
validNavigation = true;
case 82 : //R button
if (event.ctrlKey) {
validNavigation = true;
case 13 : //Press enter
validNavigation = true;
// Attach the event click for all links in the page
$("a").bind("click", function () {
validNavigation = true;
// Attach the event submit for all forms in the page
$("form").bind("submit", function () {
validNavigation = true;
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function () {
validNavigation = true;
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function () {
wireUpEvents();
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.