如何在JS中停止頁面卸載（導航）？

有誰知道如何阻止頁面重新加載或導航？如何在JS中停止頁面卸載（導航）？

jQuery(function($) { 

    /* global on unload notification */ 
    warning = true; 

    if(warning) { 
     $(window).bind("unload", function() { 
      if (confirm("Do you want to leave this page") == true) { 
       //they pressed OK 
       alert('ok'); 
      } else { 
       // they pressed Cancel 
       alert('cancel'); 
       return false; 
      } 
     }); 
    } 
});

我目前在電子商務網站上工作，顯示您未來訂單的頁面可以使用+/-按鈕更改訂購商品的數量。以這種方式更改數量並不會實際改變訂單本身，他們必須按下確認，並因此採取積極行動來更改訂單。

但是，如果他們更改了數量並導航離開頁面，我想警告他們他們這樣做是爲了防止發生意外，因爲如果他們導航或刷新頁面，更改的數量將會丟失。

在上面的代碼中，我使用了一個默認爲false的全局變量（它只對測試有效），當數量發生變化時，我會將這個變量更新爲true，當他們確認這些變化時，我會將其設置爲false。

如果警告爲真，頁面被卸載，我給他們一個確認框，如果他們說不，他們想留在這個頁面上我需要停止卸載。返回false不起作用，它仍然允許用戶導航（警報僅用於調試）

任何想法？

來源

2009-08-19 Natalie Downe

相關：http://stackoverflow.com/q/821011/435605 – 2016-02-09 06:17:07

你想使用onbeforeunload事件。

來源

2009-08-19 11:54:29 scunliffe

@scunliffe - jQuery的 '卸載' 是指 'onbeforeunload'，這是她在做什麼。 – karim79 2009-08-19 12:03:22

+17

@ karim79：不，它不。 jQuery中沒有任何綁定到beforeunload函數的東西; 「卸載」綁定到「卸載」事件。搜索源如果你不相信我;-) – NickFitz 2009-08-19 12:24:34

-5

嘗試使用e.preventDefault()而不是返回false。 'e'將是您的卸載回調的第一個參數。

來源

2009-08-19 11:55:28 NSSec

@MathieuK - 我投票了，因爲我認爲你是對的，但你應該或者1）放入一個例子或2）修改問題中的代碼合併你的建議在別人出現之前就這麼做了） – karim79 2009-08-19 12:05:34

+14

preventDefault對卸載事件不會有任何影響 - 腳本不可能取消卸載，因爲這樣會允許惡意站點劫持瀏覽器窗口。 – NickFitz 2009-08-19 12:49:11

preventdefault未在卸載事件中實現 – 2014-04-09 11:26:05

onbeforeunload是你想要的;您的函數「應該爲Event對象的returnValue屬性分配一個字符串值，並返回相同的字符串」「。有關詳細信息，請參閱Microsoft和Mozilla的文檔。

您返回的字符串將被瀏覽器用來顯示用戶自定義確認框，允許他們拒絕留在那裏，如果他們選擇。必須這樣做才能防止惡意腳本導致拒絕瀏覽器攻擊。在Chrome，Safari和Opera支持

來源

2009-08-19 12:28:53 NickFitz

需要注意的是，如果您使用jQuery綁定事件，則應該綁定到'beforeunload'（不要在字符串的on部分） – jgillman 2012-09-13 22:11:52

window.onbeforeunload = function() { 
    if (warning) { 
    return 'You have made changes on this page that you have not yet confirmed. 
    If you navigate away from this page you will loose your unsaved changes'; 
    } 
}

心不是

來源

2009-09-09 12:19:42

不支持鉻？我非常確定，當我在編輯器中輸入內容時（我在Linux上使用Chrome 4.0.206.0），我會向我展示這樣一個對話框。 – 2009-09-09 12:22:58

此代碼警告按Natalie的建議，但是如果在頁面上的表單提交禁用警告。使用JQuery。

var warning = true; 
window.onbeforeunload = function() { 
    if (warning) { 
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes"; 
    } 
} 

$('form').submit(function() { 
    window.onbeforeunload = null; 
});

來源

2010-10-14 00:04:18 crafter

完全錯過了警告變量的要點。 – meandmycode 2011-03-25 16:18:41

爲什麼downvote？我回答並添加了該主題。警告變量是爲了說明概念證明。將其關閉或刪除。我相信大多數用戶不會逐字從本網站複製代碼並按原樣使用它。 – crafter 2011-03-27 15:34:51

我猜downvote是因爲你設置了警告變量，然後不要在你的提交函數中使用它，只需使用'warning = false'而不是'window.onbeforeunload = null' – 2012-03-28 17:29:49

window.onbeforeunload = confirmExit; 
function confirmExit() 
{ 
    return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"; 
}

來源

2014-10-07 06:35:33

如何在JS中停止頁面卸載（導航）？

回答

相關問題