在这里的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>
这样,只有当用户更改了文本区域时,才会提示用户导航离开,而当用户实际提交表单时不会收到提示。
如果表单中输入了任何数据,这是一种简单的显示消息的方法,如果表单已提交,则不显示消息:
$(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;
});
})
该标准指出,可以通过取消beforeunload事件或将返回值设置为非空值来控制提示。它还声明作者应该使用Event.preventDefault()而不是returnValue,并且显示给用户的消息是不可定制的。
截至69.0.3497.92 Chrome未达到标准。然而,有一个错误报告存档,审查正在进行中。Chrome要求returnValue通过引用事件对象来设置,而不是由处理程序返回的值。
作者有责任跟踪是否进行了修改;这可以通过变量来实现,也可以通过确保只在必要时处理事件来实现。
窗口。addEventListener('beforeunload',函数(e) {
//取消标准规定的事件。
e.preventDefault ();
// Chrome需要设置returnValue
e.returnValue = ";
});
窗口。Location = '大约:空白';