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

2022-01-17 00:00:00 modal-dialog javascript confirm

我正在尝试这样做，以便如果用户对页面进行更改然后尝试离开页面而不保存，则会出现一条带有确定"按钮(没有取消"按钮)的弹出消息.单击确定"按钮，关闭消息.用户必须单击保存"按钮，否则他们将继续收到消息，禁止他们离开页面，直到单击保存"按钮.离开页面，我的意思是阻止他们导航到站点内的另一个选项卡或菜单项......如果他们点击页面上的任何其他链接，它会给他们弹出窗口.他们可以随时离开他们的网站.

I am trying to make it so that if a user makes changes to a page and then tries to leave the page without saving, a popup message will appear with an "OK" button (no "Cancel" button). Clicking the "OK" button, closes the message. The user must click the "Save" button or they will keep getting the message, prohibiting them from leaving the page until the "Save" button is clicked. By leave the page, I mean keeping them from navigating to another tab or menu item within the site...if they click any other link on the page, it would give them the popup. They can leave they site at anytime.

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

I am thinking I need JavaScript modal dialog to get rid of the Cancel button but am a bit uncertain of the implementation.

目前，我正在使用 r = Confirm(见下文)，但它有一个取消按钮，并且如果用户单击确定"，它可以选择离开页面.我不希望他们在不点击保存"按钮的情况下离开页面，否则他们将不得不关闭整个窗口.

Currently, I am using r = confirm (see below) but it has the cancel button plus it gives the option for users to leave the page if they click "OK". I do not want them to be able to leave the page without clicking the "Save" button or they would have to close the entire window.

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

Any help/explanation is very much appreciated as I am very new to this. Thank you.

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"; }
 }
}

推荐答案

看看onBeforeUnload.

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

You won't be able to force a user to stay on the website, however it will provide a pop up window with the 'Leave' and 'Stay' buttons when they attempt to close the window. All major web browsers allow the user to leave any webpage at will, and the most you can do is warn them. onBeforeUnload is probably the best cross-browser solution you will achieve to give users a chance to stay on the site and save their changes before leaving.

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

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

It would be very bad practice to attempt to lock a user to your website without an option of leaving, which is why it is not supported by any major web browsers. If it is so important that you MUST force the user to do something (and you have the right to as a company or such), you should use another platform or write a custom plugin to the user's web browser. But for general use, you can't lock their browser.

相关文章