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

Question

我正在尝试这样做，以便如果用户对页面进行更改，然后尝试在不保存的情况下离开页面，则会出现一条弹出消息，其中包含“确定”按钮（没有“取消”按钮）。单击“确定”按钮，关闭该消息。用户必须单击“保存”按钮，否则他们将不断收到消息，并禁止他们离开页面，直到单击“保存”按钮。通过离开页面，我的意思是阻止他们导航到网站内的另一个选项卡或菜单项...如果他们单击页面上的任何其他链接，就会弹出窗口。他们可以随时离开网站。

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

目前，我使用 r = 确认（见下文），但它有取消按钮，并且如果用户单击“确定”，它还为用户提供了离开页面的选项。我不希望他们在不单击“保存”按钮的情况下离开页面，否则他们将不得不关闭整个窗口。

非常感谢任何帮助/解释，因为我对此很陌生。谢谢你。

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。

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

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

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

Answer 2

如果您在 Angular 项目中使用 TypeScript，则可以将其添加到所有代码的底部：

window.addEventListener("beforeunload", (event) => {
  // set a truthy value to property returnValue
  event.returnValue = true;
});