Javascript 用户提交表单时如何禁用 beforeunload 操作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4787995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable beforeunload action when user is submitting a form?
提问by pawelmysior
I have this little piece of code:
我有一小段代码：
<script>
$(window).bind('beforeunload', function() {
$.ajax({
async: false,
type: 'POST',
url: '/something'
});
});
</script>
I wonder, how could I disable this request when user hits the submit button.
我想知道，当用户点击提交按钮时，我怎么能禁用这个请求。
Basically something like here, on SO. When your asking a question and decide to close the page, you get a warning window, but that doesn't happen when you're submitting the form.
基本上像这里的东西，在SO上。当您提出问题并决定关闭页面时，您会看到一个警告窗口，但在提交表单时不会发生这种情况。
回答by Jacob Relkin
回答by Parham
Use
用
$('form').submit(function () {
window.onbeforeunload = null;
});
Make sure you have this before you main submit function! (if any)
在主要提交功能之前确保你有这个！（如果有的话）
回答by David
This is what we use:
这是我们使用的：
On the document ready we call the beforeunload function.
在文档准备好后，我们调用 beforeunload 函数。
$(document).ready(function(){
$(window).bind("beforeunload", function(){ return(false); });
});
Before any submit or location.reload we unbind the variable.
在任何提交或 location.reload 之前，我们取消绑定变量。
$(window).unbind('beforeunload');
formXXX.submit();
$(window).unbind("beforeunload");
location.reload(true);
回答by dnxit
Looking for Detect onbeforeunload for ASP.NET web application well I was, I've to show warning message if some input control changes on the page using ASP.NET with Master Page and Content Pages. I'm using 3 content placeholders on the master page and the last one is after the form
寻找 Detect onbeforeunload for ASP.NET web application 很好，如果使用带有母版页和内容页的 ASP.NET 页面上的某些输入控件发生更改，我必须显示警告消息。我在母版页上使用了 3 个内容占位符，最后一个在表单之后
<form runat="server" id="myForm">
so after the form closing tag and before the body closing tag used this script
所以在表单结束标记之后和正文结束标记之前使用了这个脚本
<script>
var warnMessage = "Save your unsaved changes before leaving this page!";
$("input").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$("select").change(function () {
window.onbeforeunload = function () {
return 'You have unsaved changes on this page!';
}
});
$(function () {
$('button[type=submit]').click(function (e) {
window.onbeforeunload = null;
});
});
</script>
beforeunload doesn't work reliably this way, as far as binding goes. You should assign it natively
就绑定而言， beforeunload 不能以这种方式可靠地工作。您应该本地分配它
so I got it working like this bind and unbind didn't work out for me also With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions.
所以我让它像这样绑定和解除绑定对我来说也不起作用随着 jQuery 1.7 以后事件 API 已经更新，.bind()/.unbind() 仍然可用于向后兼容，但首选方法是使用 on()/off() 函数。
回答by Anup Panwar
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0-beta00006/jquery.dirtyforms.min.js"></script>
<script type="text/javascript">
$(function() {
$('#form_verify').dirtyForms();
})
</script>
<title></title>
<body>
<form id="form_verify" action="a.php" method="POST">
Firt Name <input type="text">
Last Name <input type="file">
<input type="submit">
</form>
回答by Shele?n Alag
if you're using bind then use this:
如果您使用的是绑定，请使用以下命令：
$('form').submit(function () {
$(window).unbind('beforeunload');
});
This will be good for all form submit.
这对所有表单提交都有好处。
回答by Jon Freynik
Super old question but might be useful to others.
超级老问题，但可能对其他人有用。
Simply detaching the "beforeunload" from the "submit" event would not work for me - because the submit handler was being called even when there were errors in the form that the user had to fix. So if a user attempted to submit the form, then received the errors, then clicked to another page, they would be able to leave without the warning.
简单地从“提交”事件中分离“beforeunload”对我来说不起作用 - 因为即使用户必须修复表单中的错误，也会调用提交处理程序。因此，如果用户尝试提交表单，然后收到错误，然后单击到另一个页面，他们将能够在没有警告的情况下离开。
Here's my workaround that seems to work pretty well.
这是我的解决方法，似乎效果很好。
(function($) {
var attached = false,
allowed = false;
// catch any input field change events bubbling up from the form
$("form").on("change", function () {
// attach the listener once
if (!attached) {
$("body").on("click", function (e) {
// check that the click came from inside the form
// if it did - set flag to allow leaving the page
// otherwise - hit them with the warning
allowed = $(e.target).parents("form").length != 0;
});
window.addEventListener('beforeunload', function (event) {
// only allow if submit was called
if (!allowed) {
event.preventDefault();
event.returnValue = 'You have unsaved changes.';
}
});
}
attached = true;
});
}(jQuery));
This way, if the click to leave the page originated from inside the form (like the submit button) - it will not display the warning. If the click to leave the page originated from outside of the form, then it will warn the user.
这样，如果离开页面的点击来自表单内部（如提交按钮） - 它不会显示警告。如果离开页面的点击来自表单之外，那么它会警告用户。
