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

在这里的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

其他回答

该标准指出，可以通过取消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

你可以在文本区域(或任何其他字段)添加一个onchange事件，在JS中设置一个变量。当用户试图关闭页面(window.onunload)时，您检查该变量的值并相应地显示警报。

2009-07-13 13:03:06

试试这个，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

更新(2017)

现代浏览器现在认为显示自定义消息是一种安全隐患，因此它已从所有浏览器中删除。浏览器现在只显示通用消息。因为我们不再需要担心设置消息，它就像这样简单:

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

阅读下面的内容，了解传统浏览器的支持。

更新(2013)

最初的答案适用于IE6-8和FX1-3.5(这是我们在2009年写它时的目标)，但现在已经过时了，不能在大多数当前的浏览器中工作-我把它留在下面作为参考。

窗外。并非所有浏览器都一致对待Onbeforeunload。它应该是一个函数引用，而不是一个字符串(如最初的答案所述)，但在旧的浏览器中也可以工作，因为对大多数浏览器的检查似乎是是否有任何东西被分配给onbeforeunload(包括返回null的函数)。

你设置窗口。onbeforeunload到一个函数引用，但在旧的浏览器中，你必须设置事件的returnValue，而不仅仅是返回一个字符串:

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

如果你想让用户在没有消息的情况下继续，你不能让confirmOnPageExit执行检查并返回null。你仍然需要删除事件来可靠地打开和关闭它:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

原答案(2009年工作)

打开它:

window.onbeforeunload = "Are you sure you want to leave?";

关闭:

window.onbeforeunload = null;

请记住，这不是一个正常的事件—您不能以标准方式绑定到它。

检查值?这取决于您的验证框架。

在jQuery中，这可能是(非常基本的例子):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

2009-07-13 13:03:24

根据这个线程上的所有答案，我写了下面的代码，它对我来说是有效的。

如果你只有一些输入/文本区域标签，需要检查onunload事件，你可以将HTML5数据属性赋值为data-onunload="true"

如。

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

和Javascript (jQuery)可以看起来像这样:

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

2013-02-21 23:50:48

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

推荐文章

最新文章

标签