如何提示的未保存的更改用戶，如果他們試圖離開網頁

可能重複：
How do I stop a page from unloading (navigating away) in JS?
Prompt user for unsaved changes when leaving webpage 如何提示的未保存的更改用戶，如果他們試圖離開網頁

我有一個PHP的形式，我設計了只含Dreamweaver中文本字段，每次從我的數據庫中檢索單個記錄。我在這個頁面上還有一個'更新記錄'按鈕，點擊時更新數據庫記錄，並對錶單中的數據進行任何更改。我希望如果用戶以某種方式編輯表單數據並嘗試離開頁面而不點擊「更新記錄」按鈕，他們會被提示該頁面包含未保存的更改，並且會要求他們驗證他們是否要離開或不（可能通過一些javasript如果可能的話）。

任何幫助，非常感謝。

來源

2013-01-16 Aetos

javascript'unload'事件會在用戶離開頁面時觸發 – Sharlike

@Diodeus已經檢查過一個，它非常有幫助：/ – Aetos

onbeforeunload火災之前，你可以使用一個相當獨特的方法停止導航：簡單地返回您要顯示在對話框中的字符串，瀏覽器會詢問是否將用戶真的想離開頁面。

如果不返回字符串，瀏覽器將繼續正常導航。例如，您可以使用此行爲來僅在用戶未保存更改時才顯示提示。

window.onbeforeunload = function(e) { 
    if (unsavedChanges) return 'Dialog text here.'; 
};

您只能通過返回一個字符串並讓瀏覽器提示來停止導航。在onbeforeunload和onunload中實際禁止撥打alert或confirm，您無法實際停止導航。

來源

2013-01-16 20:13:30 josh3736

感謝您的回覆，但我希望看到對話框只有當對錶單進行了更改，否則沒有對話框...任何想法如何做到這一點？ – Aetos

維護一個變量（在我的例子中稱爲'unsavedChanges'），用於跟蹤是否進行了更改。這可能很簡單，因爲在輸入時監聽鍵盤事件，並在觸發輸入時將變量設置爲true。 – josh3736

好的，謝謝，我會試試 – Aetos

使用jQuery的「on」api卸載方法。導航真正開始

var flag = true; // set this var according to your use. 
$(window).on('beforeunload', function(){ 
    if(flag) { 
     return "It looks like you have input you haven't submitted." 
     } 
});

來源

2013-01-16 20:06:25 insomiac

**這不起作用**'unload'事件無法停止導航。 – josh3736

其beforeunload事件並使用它與「on」API而不是綁定。 – insomiac

這仍然不起作用，因爲你不能對'confirm'調用的結果做任何事情。（你在'//做別的東西'行上做了什麼？）另外，HTML5強制要求生成模態UI（例如'confirm'）的調用在'beforeunload'中被忽略，所以這在新的瀏覽器中完全沒有用處。停止頁面導航的**唯一的方法是[*返回*]（http://stackoverflow.com/a/14366972/201952）來自'beforeunload'的字符串，並讓瀏覽器執行提示。 – josh3736

如何提示的未保存的更改用戶，如果他們試圖離開網頁

回答

相關問題