2010-08-13 58 views
7

我有一個使用大量JavaScript(主要是jQuery)的網站,我需要一個很好的全局方式來讓用戶知道他們在離開時會丟失未保存的更改一個特定的頁面。警告用戶他們將丟失數據的最佳做法

此刻,我有一個onchange事件放置在輸入上,並將我的主導航包裹在一個函數中,該函數將在點擊時顯示警告。 (需要手動包裹,這是非常不理想的導航這不是主要的導航部分)

+0

乾杯的拼寫檢查GenericTypeTea! – Toby 2010-08-13 14:53:53

+0

沒關係。當談到人們寫作鬆散而不是失落時,我有點強迫症。 – GenericTypeTea 2010-08-13 14:58:14

回答

5

我在我的輸入上有一個onchange事件,並且在他們改變時將isDirty變量設置爲true。

然後我用onbeforeunload事件來警告用戶未保存的更改:

var isDirty = false; 

window.onbeforeunload = function (evt) { 
    if (isDirty) { 
     return 'If you continue your changes will not be saved.'; 
    } 
} 
+0

爲什麼不只是檢查isDirty是否是真的,而不是有一個單獨的功能來做到這一點? – user353297 2010-08-13 14:51:17

+0

@ mel33t - 呃,我是。 – GenericTypeTea 2010-08-13 14:56:09

+0

你必須編輯你的答案,因爲我可以發誓讀行「if(checkIsDirty()){」(或類似的東西)。 – user353297 2010-08-13 15:05:50

5

您正在尋找onbeforeunload事件

這感覺很笨重,不能很好地擴展。

$(window).bind('beforeunload', function(){ 
    return "Are you really sure?"; 
}); 

母語:

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

那當然只是 「預防方法」。您仍然需要一些邏輯來了解您的網站是否有變化。例如,可以通過使用boolean來輕鬆完成。此外,你應該做一個快速檢測像

if('onbeforeunload' in window){} 

我認爲所有主流瀏覽器支持時下事件,但仍有瀏覽器不知道該事件。所以如果上述條件失敗了,你仍然可以優雅地換一種方式。

+1

+1。當然,有一些可以檢查的標誌,並且只有在有*未保存的變化將會丟失時纔會彈出確認。請注意,SO本身就是這樣做的(開始輸入並回答並嘗試導航...)。 – 2010-08-13 14:48:46

0

使用on unload窗口事件捕捉頁面何時發生變化。然後提示一個燈箱提醒警告用戶,如果瀏覽任何未保存的數據將會丟失。

相關問題