警告用户他们将丢失数据的最佳做法

Question

我有一个使用大量JavaScript(主要是jQuery)的网站,我需要一个很好的全局方式让用户知道当他们离开特定页面时他们将丢失未保存的更改.

目前,我在输入上放置了一个onchange事件,并将我的主导航包装在一个函数中,该函数将在单击时显示警告.

这感觉非常笨重,并且不能很好地扩展(导航不是主要导航的一部分需要手动包装,这远非理想)

Answer 1

我onchange在输入上有一个事件,并在isDirty变量时将变量设置为true.

然后我使用onbeforeunload事件来警告用户未保存的更改:

var isDirty = false;

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

Answer 2

你正在寻找这个onbeforeunload活动.

喜欢

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

本地:

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

那当然只是"预防方法".您仍需要一些逻辑来了解您的网站是否有更改.这可以通过使用boolean例如来轻松完成.此外,你应该快速检测,如

 if('onbeforeunload' in window){}

我认为现在所有主流浏览器都支持这个活动,但仍然有浏览器不知道该事件.因此,如果上述条件失败,您仍然可以优雅地回避另一种方式.