javascript - 导航 html 页面故障安全时，如何检查未保存的更改？

Question

我的网络应用程序有多个 html 页面。在给定的页面（我们称之为页面 A）上，用户可以对表单进行编辑。当用户导航到我的应用程序中的另一个页面时，我当前检查编辑的方法是使用下面的 js 脚本。

$(window).on('beforeunload', function () {
    if (changes == true) {
        return "this won't show, as the browsers won't show a custom message for security reasons, but is required";
    };
});

当我第一次在我的应用程序中导航到另一个页面（我们称之为页面 B）时，这工作得很好。但是，如果我返回页面 A 并进行另一轮编辑，即使上面的函数运行并且我的变量“更改”为真，浏览器也不会显示您正在导航的警告消息。显然这是因为页面 B 已经被缓存了。我假设这是因为如果我强制重新加载页面 B 并返回页面 A 并导航离开，浏览器会正确显示警告消息。

在导航到另一个页面时，有什么更好的解决方案可以确保始终警告用户他们正在离开具有未保存更改的页面？

更新：这适用于 Chrome，但不适用于 Safari。

标签： javascripthtml