javascript - 当 POST 到 iframe 时，location.reload 会阻止表单提交(Firefox 37.0.2)

Question

Firefox 版本为 37.0.2

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

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

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

此函数在 Chrome 和 IE 中按预期工作(或者至少按照我的预期)。在 Firefox 中，页面会重新加载而不提交表单。控制台中没有错误，看起来只是发生了页面刷新。当我注释掉该行时:location.reload(); ，表单提交，但我必须手动刷新页面才能看到数据更改。

我已经搜索过类似的问题，但到目前为止还无法解决该问题。我尝试过的事情:

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

• 我删除了 target从表单中删除参数，然后删除 location.reload()来自 JavaScript 的行。然后，所有浏览器的行为都是相同的:表单被提交，页面被重定向到我的“成功!”页。这告诉我 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);
     }
});

Answer 1

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