在Chrome和IE中使用jQuery在body元素上設置onbeforeunload

Question

我有一個系統，我想檢查用戶，如果他們確定他們想要在設置髒標誌後離開頁面。

我正在使用下面的代碼 - 在FireFox中，我可以通過FireBug查看頁面源，並且標記正確地插入了onbeforeunload屬性。

在Chrome和FireFox中，雖然沒有發生這種情況，但我可以在沒有任何警告的情況下離開頁面。用於更新body標籤的jQuery行肯定正在執行，它只是沒有執行它。

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)'); 
    } 
} 

任何想法如何從這裏開始？

Answer 1

您不能通過返回false來中止頁面卸載。你必須返回將在用戶消息框中顯示的字符串，然後他決定是否要離開或留在頁面上（通過選擇「確定」或「取消」按鈕），所以你需要編寫代碼這樣的：

window.onbeforeunload = function() { 
    return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse... 
}; 

Answer 2

window.onbeforeunload = function() { return 'Are you sure?' }; 

Answer 3

試試這個

<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> 

Answer 4

檢查這個代碼：

var validNavigation = false; 

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(); 
}); 

Answer 5

這些腳本WOR k很好，但是如果我想在用戶確認窗口關閉時觸發AJAX調用呢？

我試過，但AJAX調用被激發，如果雙方用戶點擊「是，關閉」或「沒有，住在這裏」（試圖在Firefox 38.x）

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(); 
      } 

      $.ajax({ 
       async: false, 
       url: "/launch-my-script.php" 
      }); 

      //return works for Chrome and Safari 
      return leave_message; 
     } 
    } 
} 

Answer 6

這不是很漂亮，但它做到了。

var warnclose = true; 
var warn = function(e) { 
    var warning = 'Your warning message.'; 
    if (warnclose) { 
     // Disables multiple calls 
     warnclose = false; 

     // In case we still need warn to be called again 
     setTimeout(function(){ 
      warnclose = true; 
     }, 500); 

     return warning; 
    } 
}; 
window.onbeforeunload = warn;