当提交更改时，如何显示“您确定要导航离开此页面吗?”

在这里的stackoverflow，如果你开始做改变，然后你试图导航离开页面，一个javascript确认按钮显示，并询问:“你确定你想导航离开这个页面吗?”

以前有人实现过这个吗?我如何跟踪已提交的更改? 我相信我自己可以做到这一点，我正在努力从你们这些专家那里学习好的做法。

我尝试了以下方法，但仍然不起作用:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

有人能举个例子吗?

当前回答

试试这个，100%有效

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>

2013-10-01 17:56:38

其他回答

当用户开始对表单进行更改时，将设置一个布尔标志。如果用户尝试离开页面，则检查窗口中的标志。onunload事件。如果设置了标志，则通过以字符串形式返回消息来显示消息。以字符串形式返回消息将弹出一个包含您的消息的确认对话框。

如果你使用ajax来提交更改，你可以在更改提交后(即在ajax成功事件中)将标志设置为false。

2009-07-13 13:03:00

body标签有一个"onunload"参数，你可以从那里调用javascript函数。如果返回false，则阻止导航离开。

2009-07-13 13:01:58

对于正在寻找简单解决方案的新人，只需尝试Areyousure.js

2013-12-17 15:51:20

该标准指出，可以通过取消beforeunload事件或将返回值设置为非空值来控制提示。它还声明作者应该使用Event.preventDefault()而不是returnValue，并且显示给用户的消息是不可定制的。

截至69.0.3497.92 Chrome未达到标准。然而，有一个错误报告存档，审查正在进行中。Chrome要求returnValue通过引用事件对象来设置，而不是由处理程序返回的值。

作者有责任跟踪是否进行了修改;这可以通过变量来实现，也可以通过确保只在必要时处理事件来实现。

窗口。addEventListener('beforeunload'，函数(e) { //取消标准规定的事件。 e.preventDefault (); // Chrome需要设置returnValue e.returnValue = "; })；窗口。Location = '大约:空白';

2018-09-16 21:31:18

你想要使用的是JavaScript中的onunload事件。

这里有一个例子:http://www.w3schools.com/jsref/event_onunload.asp

2009-07-13 13:03:41

当提交更改时，如何显示“您确定要导航离开此页面吗?”

推荐文章

最新文章

标签