location.reload 在 POST 到 iframe 时阻止表单提交（Firefox 37.0.2）

Posted 2023-05-09

【中文标题】location.reload 在 POST 到 iframe 时阻止表单提交（Firefox 37.0.2）

【英文标题】：location.reload prevents form submit when POST to iframe (Firefox 37.0.2)

【发布时间】：2015-06-28 16:36:05

【问题描述】：

Firefox 版本为 37.0.2

我有一个 MVC 应用程序，我在其中提交表单以执行 CRUD 功能。我 POST 到一个隐藏的 iframe，然后在 POST 之后刷新页面，以便用户可以在数据库更新后看到新数据。这是负责添加新用户的 javascript 函数：

$('#submitNewUser').click(function () 
                document.getElementById("newUser").submit();
                $('#newUser').remove();
                location.reload();
 

submitNewUser 是提交表单的按钮（id 和名称）。 newUser 是提交的模态表单的名称和 ID。所以点击submitNewUser按钮，newUser表单被提交，然后newUser模态窗口被移除，然后页面被重新加载。

此功能在 Chrome 和 IE 中按预期（或至少按我的预期）工作。在 Firefox 中，页面会在不提交表单的情况下重新加载。控制台中没有错误，看起来就像发生了页面刷新。当我注释掉这一行时：location.reload();，表单提交，但我必须手动刷新页面才能看到数据更改。

我已经搜索过类似的问题，但迄今为止无法解决问题。我尝试过的事情：

将iframe的name参数改为NAME 从 iframe 的 name 和 id 参数中删除所有大写字母 使用window.location = window.location 而不是location.reload() 我将输入类型从 button 更改为 submit 并将 javascript 函数修改为表单的 onSubmit，但行为与我最初报告的问题相同

我从表单中删除了target 参数，然后从javascript 中删除了location.reload() 行。然后，所有浏览器的行为都是相同的：表单被提交，页面被重定向到我的“成功！”页。这告诉我location.reload() 发生了一些事情，以及它如何与 Firefox 中的 iframe 交互。这是我的 iframe 代码：

<iframe id="new_user_hidden_frame" name="new_user_hidden_frame" class="hide"></iframe>

这里是我为我的 POST 方法设置目标的地方：

<form id="newUser" method="POST" action='<c:url value="/createUser.htm" />' target="new_user_hidden_frame">

编辑： 根据公认的答案，Firefox 实际上是唯一在技术上正确处理此问题的浏览器！我在收到回复之前刷新了页面，所以这种行为是 100% 合适的。我在函数中添加了以下内容，因此在收到响应之前页面不会刷新：

$.ajax(
     success: function() 
     window.location.reload(true);
     
);

【参考方案1】：

正如您的代码所说，您正在尝试在获得响应之前重新加载页面，因此请求尚未完成，为此您必须延迟重新加载或使用 ajax 提交表单并在回调函数中重新加载页面的更好方式。

【讨论】：

啊哈！我在脚本中添加了一些代码来检查是否成功，然后刷新页面，现在一切正常。谢谢！