攔截頁面退出事件

102

在我的系統中編輯頁面時，用戶可能決定導航到另一個網站，這樣做可能會丟失所有未保存的編輯。攔截頁面退出事件

我想攔截任何嘗試轉到另一個頁面並提示用戶確定他們希望發生這種情況，因爲他們可能會失去他們當前的工作。

Gmail以非常相似的方式執行此操作。例如，編寫一封新郵件，開始在郵件正文中輸入內容，然後在地址欄中輸入一個新位置（例如twitter.com或其他）。它會及時詢問「你確定嗎？」

想法如何複製這個？我的目標是IE8，但是想要兼容FF & Chrome。

來源

2009-11-09 Chris Ballance

http://stackoverflow.com/questions/147636/best-way-to-detect-when-user-leaves-a-web-page – 2009-11-09 23:00:12

127

類似Ghommey的答案，但是這也支持IE和Firefox的舊版本。

window.onbeforeunload = function (e) { 
    var message = "Your confirmation message goes here.", 
    e = e || window.event; 
    // For IE and Firefox 
    if (e) { 
    e.returnValue = message; 
    } 

    // For Safari 
    return message; 
};

來源

2009-11-10 00:02:01

你能解釋第一行（var message = ...）嗎？我不知道那個逗號和第二個表達式在做什麼。 – mtmurdock 2012-07-27 17:01:34

@mtmurdock這只是用於聲明多個變量的Javascript語法。 '變種FOO，巴;' 相同 '變種FOO;'' 變種巴;' – 2012-10-16 07:02:52

@mtmurdock，第二條語句「_var_ E = ||éwindow.event;」意味着set ** e **等於參數_e_（如果它是真的）或者window.event（如果不是真的）。如果參數_e_爲空，這將不是真的。 – 2012-10-16 07:09:53

看到這篇文章。你正在尋找的特點是onbeforeunload

示例代碼：

<script language="JavaScript"> 
    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?"; 
    } 
</script>

來源

2009-11-09 22:59:03 jantimon

有什麼辦法，以確定用戶已經選擇了「離開這個頁面「選項而不是」留在這個頁面上「？ – 2016-04-20 08:53:08

而是一個惱人的確認彈出的，這將是很好延遲離開只是有點（毫秒的物質）成功管理的未保存的數據發送到服務器，這是我用寫作爲我的網站託管虛擬文本控制檯是這樣的：

window.onbeforeunload=function(e){ 
    // only take action (iterate) if my SCHEDULED_REQUEST object contains data   
    for (var key in SCHEDULED_REQUEST){ 
    postRequest(SCHEDULED_REQUEST); // post and empty SCHEDULED_REQUEST object 
    for (var i=0;i<1000;i++){ 
     // do something unnoticable but time consuming like writing a lot to console 
     console.log('buying some time to finish saving data'); 
    }; 
    break; 
    }; 
}; // no return string --> user will leave as normal but data is send to server

編輯： 參見Synchronous_AJAX以及如何做到這一點與jquery

來源

2012-01-08 18:16:14 Remi

我喜歡彈出式窗口的替代方法。感謝您的建議，Remi。 – 2012-01-09 15:39:04

，這並不完全沒有意義-1。JavaScript沒有線程你正在做的是做一個postRequest，然後暫停網站的計算，而不允許任何人不做任何事（包括你的postRequest，同時在計算暫停之前已經發送）。 – fmsf 2012-07-04 14:12:52

這就是爲什麼它的工作原理：實際上，後請求是在計算暫停之前發送的，但是在頁面實際保留之前對頁面進行了一些阻塞，可以確保瀏覽器客戶端（而不是JavaScript）有足夠的時間來發送此請求正常。我注意到，當我只發送請求（不阻塞）並立即離開頁面時，請求並不總是發送。 – Remi 2012-07-06 04:55:56

我有沒有完成所有必需數據的用戶。

<cfset unloadCheck=0>//a ColdFusion precheck in my page generation to see if unload check is needed 
var erMsg=""; 
$(document).ready(function(){ 
<cfif q.myData eq ""> 
    <cfset unloadCheck=1> 
    $("#myInput").change(function(){ 
     verify(); //function elsewhere that checks all fields and populates erMsg with error messages for any fail(s) 
     if(erMsg=="") window.onbeforeunload = null; //all OK so let them pass 
     else window.onbeforeunload = confirmExit(); //borrowed from Jantimon above; 
    }); 
}); 
<cfif unloadCheck><!--- if any are outstanding, set the error message and the unload alert ---> 
    verify(); 
    window.onbeforeunload = confirmExit; 
    function confirmExit() {return "Data is incomplete for this Case:"+erMsg;} 
</cfif>

來源

2015-01-08 22:38:02 gordon

攔截頁面退出事件

回答

相關問題