Form 使用 iFrame 作为目标重新访问页面时重新提交

Question

我使用 Google 表单在我的网站上创建了一个表单，并且通过一些教程，我阻止了该页面导航到 Google 表单感谢页面，而是使用我自己的感谢页面。

这样做的方法是使用隐藏的 iframe 作为表单上的目标，然后 iFrame 在将窗口切换到感谢页面之前检查表单是否已成功提交。

<iframe name="hidden_iframe" id="hidden_iframe"
   style="display:none;" onload="if(submitted == true)
  {window.location='https://www.normadorothy.com/sample-thanks';}">
</iframe>

这可以正常工作并在显示感谢页面之前提交表单，但是如果用户随后单击后退按钮，则会再次提交表单。

我试过console.log(submitted)，它返回false，所以不确定为什么要提交两次。

为清楚起见，表单代码为：

<form id="sample-form" class="validate" action="google-url" method="post" target="hidden_iframe" onsubmit="return validate();">

验证函数检查所有字段，将submitted 设置为true，然后提交表单。

任何帮助都会很棒，我一直在用这个把头撞到墙上！

Answer 1

我猜这是因为后退按钮试图将您带回到 iFrame 的最后一个已知状态（即表单 POST URL），而不是您期望的“原始”状态。您可以尝试在父页面上使用 JS 编写 iFrame 来解决此问题：

var iframe = document.createElement('iframe');
iframe.onload = function() { if(submitted == true)  {window.location='https://www.normadorothy.com/sample-thanks';}};
iframe.style.display = 'none';
document.body.appendChild(iframe);