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

有人能举个例子吗?


当前回答

onbeforeunload Microsoft-ism是我们拥有的最接近标准解决方案的东西,但请注意浏览器的支持是不均衡的;例如,对于Opera,它只适用于版本12及更高的版本(在撰写本文时仍处于测试阶段)。

此外,为了最大限度地兼容,您需要做的不仅仅是返回一个字符串,正如Mozilla开发者网络中所解释的那样。

示例:定义以下两个函数用于启用/禁用导航提示符(参见MDN示例):

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

然后像这样定义一个表单:

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

这样,只有当用户更改了文本区域时,才会提示用户导航离开,而当用户实际提交表单时不会收到提示。

其他回答

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

如果表单中输入了任何数据,这是一种简单的显示消息的方法,如果表单已提交,则不显示消息:

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

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

onbeforeunload Microsoft-ism是我们拥有的最接近标准解决方案的东西,但请注意浏览器的支持是不均衡的;例如,对于Opera,它只适用于版本12及更高的版本(在撰写本文时仍处于测试阶段)。

此外,为了最大限度地兼容,您需要做的不仅仅是返回一个字符串,正如Mozilla开发者网络中所解释的那样。

示例:定义以下两个函数用于启用/禁用导航提示符(参见MDN示例):

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

然后像这样定义一个表单:

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

这样,只有当用户更改了文本区域时,才会提示用户导航离开,而当用户实际提交表单时不会收到提示。

使用JQuery,这是非常容易做到的。因为你可以绑定到集合。

这是不够的做onbeforeunload,你想只触发导航离开,如果有人开始编辑东西。