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){}

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

Answer 3

在on unload窗口事件中使用以捕获页面何时更改。然后提示灯箱警报，警告用户是否导航，任何未保存的数据都将丢失。

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

3 个答案: