2010-08-13 26 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窗口事件捕捉页面何时发生变化。然后提示一个灯箱提醒警告用户,如果浏览任何未保存的数据将会丢失。

相关问题