当用户尝试离开页面而不保存时创建确认 JavaScript

Question

我正在努力做到这一点，如果用户对页面进行了更改，然后试图在不保存的情况下离开该页面，则会出现一条带有 "OK" 按钮的弹出消息（没有 "Cancel" 按钮）。单击 "OK" 按钮，关闭消息。用户必须单击 "Save" 按钮，否则他们将继续收到消息，禁止他们在单击 "Save" 按钮之前离开页面。通过离开页面，我的意思是阻止他们导航到站点内的另一个选项卡或菜单项...如果他们单击页面上的任何其他 link，它会给他们弹出窗口。他们可以随时离开网站。

我想我需要 JavaScript 模态对话框来摆脱“取消”按钮，但我对实现有点不确定。

目前，我正在使用 r = confirm（见下文），但它有取消按钮，而且它还为用户提供了在单击 "OK" 时离开页面的选项。我不希望他们在不单击 "Save" 按钮的情况下离开页面，否则他们将不得不关闭整个 window。

任何 help/explanation 非常感谢，因为我对此很陌生。谢谢。

if (typeof unsaved != 'undefined') {
if (unsaved == true) {
var r = confirm("Please click Update. Unsaved changes will be lost.");
if (r == false) {
     saveNeeded = "true";
     }
     else { saveNeeded = "false"; }
 }
}

Answer 1

看看onBeforeUnload。

您无法强制用户留在该网站上，但是当他们尝试时，它会提供一个带有 'Leave' 和 'Stay' 按钮的弹出窗口 window关闭 window。所有主要的网络浏览器都允许用户随意离开任何网页，而你最多能做的就是警告他们。 onBeforeUnload 可能是您将实现的最佳跨浏览器解决方案，让用户有机会留在网站上并在离开前保存他们的更改。

<script language="JavaScript">
    window.onbeforeunload = confirmExit;
    function confirmExit() {
        return "Please click Update. Unsaved changes will be lost.";
    }
</script>

尝试将用户锁定到您的网站而没有离开的选项是非常糟糕的做法，这就是为什么它不受任何主要网络浏览器支持的原因。如果它非常重要以至于你必须强迫用户做某事（并且你有权作为公司等），你应该使用另一个平台或为用户的网络浏览器编写一个自定义插件。但是对于一般用途，你不能锁定他们的浏览器。

当用户尝试离开页面而不保存时创建确认 JavaScript

Create confirm JavaScript for when users try to leave page without saving

javascript

modal-dialog

confirm