以编程方式提交表单时，浏览器会中止 iframe 的加载

Question

我有一个看起来像这样的文档：

<iframe source="http://example.com/" style="width:100%; height:100%"></iframe>
<form action="//example.com/foo" method="post">
  <input type="hidden" name="foo" value="bar">
</form>
<script>
$(function(){
  $('form').submit();
});
</script>

这个概念是在表单提交时显示 iframe 的内容，作为插页式步骤。

问题是，当表单提交时，浏览器会中止对 iframe 源的请求，所以即使表单提交需要一段时间，iframe 仍然是空白的。

我发现将表单提交推迟 50 毫秒可以完成这项工作，但感觉很麻烦。

任何想法为什么它不会加载以及覆盖它的正确方法是什么？

Answer 1

如果您想等到 iframe 加载完毕，请使用：

<script>
$(function(){
    $('iframe').on('load', function() {
        $('form').submit();
    });
});
</script>

或者，您可以异步发布表单，这样它就不会阻止 iframe 加载，但是您需要在 Javascript 中处理服务器响应。为此，您可能会发现此线程很有用：jQuery - Send a form asynchronously