如何在提交表单后（即在处理过程中）阻止用户离开页面？答案

【问题标题】：How to stop user from leaving page after submitting form (i.e. while it's processing)?如何在提交表单后（即在处理过程中）阻止用户离开页面？
【发布时间】：2013-02-28 00:42:01
【问题描述】：

这里有很多类似的问题，但我没有找到任何关于阻止用户在提交表单后（即在处理过程中）离开页面的问题。

我的网站上有一个页面，其表单需要很长时间才能提交（有时长达 15 秒），因此我希望在用户提交表单后弹出警告以使用户留在页面上。

问题是，无论我如何尝试使用window.onbeforeunload，当提交表单时，我总是会从该函数中得到一个确认对话框，这不是我想要的。我不希望用户在提交表单时看到确认对话框，而是在提交表单之后，并且只有在他们尝试离开页面之后才看到。

HTML：

<form id="myform" method="post" action="" onsubmit="formSubmitted();">
    <button type="submit" onclick="return checkForm();">submit form</button>
</form>

Javascript：

formSubmittedFlag = 0;

function checkForm()
{
    ...

    if(...)
    {
        return true;
    }
    else
    {
        return false;
    }
}


function formSubmitted()
{
    formSubmittedFlag = 1;
}



window.onbeforeunload = function()
{
    if(formSubmittedFlag == 1)
    {
        return "Are you sure you want to leave the page?";
    }
}

有没有办法实现我想要的？

【问题讨论】：

你知道你有一个同名的变量和函数吗？
@Musa - 这实际上是我真实代码的简化版本，其中函数和变量名称不同。不过，我很高兴你指出了这一点，因为我不知道这是个问题。
为什么要阻止用户关闭标签？该请求已发送到您的服务器，将在其中正确处理。如果用户不想等待反馈，他应该可以这样做。
@Bergi - 这是一个结帐页面，所以用户真的需要留在页面上查看处理订单时是否有错误。我不认为任何用户会故意离开页面，所以这是我试图保护用户在提交表单后不小心关闭页面。
“提交表单”包括“卸载页面”（除非您使用 ajax 发送表单的内容）。您需要在以下页面中包含预防措施，即发送表单的结果页面。

标签： javascript

【解决方案1】：

使用 AJAX 而不是表单的内置操作提交表单。 jQuery Form Plugin 可能会有所帮助。

【讨论】：

【解决方案2】：

将formSubmitted的内容替换为：

sessionStorage.formSubmittedFlag=true;
notReloaded=true;

并将 window.onbeforeunload 的内容替换为：

    if(sessionStorage.formSubmittedFlag===true&&notReloaded!=true)
        return 'do you want to leave?';

【讨论】：