表单提交后关闭 Colorbox iframe，然后重定向父页面

Posted 2023-05-09

【中文标题】表单提交后关闭 Colorbox iframe，然后重定向父页面

【英文标题】：Close Colorbox iframe after form submit and then redirect parent page

【发布时间】：2012-03-29 03:39:28

【问题描述】：

我已经尝试了几个星期来解决这个问题，结果只是平庸。由于我缺乏 Jquery 知识和最少的 javascript 知识，我拼凑了一些在网上找到的代码，我确信这都是错误的。我正在使用 Colorbox 在 iframe 中显示带有添加到购物车按钮的产品（父级和 iframe 都是来自我的服务器的页面）。我想要的结果是：

（为清晰起见进行了编辑）

让添加到购物车按钮在提交时将表单数据传递给父级。 通过表单后关闭 Colorbox iframe。 父框架提交表单。

到目前为止，我在 iframe 中为表单使用了以下代码：

<form name="cart_quantity" action="index.php?action=add_product" method="post" 
enctype="multipart/form-data" onSubmit="parent.$.fn.colorbox.close();">
<input type="hidden" name="qty" value="1" /> 
<input type="hidden" name="id" value="7" /> 
<input type="hidden" name="attri" value="17" id="attri-17" />
<input class="cssButton button" type="submit" value="ADD TO CART"/> 
</form>

我在父页面调用颜色框的脚本是：

<script>
function lightbox()    
  $.fn.colorbox( 
  iframe:true,
  onClosed:function() window.location = 'index.php?main_page=shopping_cart'; , 
  href:"./index.php?main_page=product_info&id=7");

</script>

所以到目前为止的问题：

当提交表单时，Colorbox 关闭并且表单只提交了一半的时间（部分成功率）。我试图用萤火虫跟踪发布的数据，试图查看它是否每次都发布，但因为它来自 iframe，我似乎什么也看不到。

如果有人能帮我用正确的代码解决这个问题，我将不胜感激！

【问题讨论】：

感谢您花时间写下您的请求；也许是我，但我仍然很困惑。特别是“将添加到购物车按钮提交到父页面”对我不起作用。考虑进一步分解：您能否使用 iframe 框来捕获用户意图并简单地关闭将该意图传递给父级，然后实际提交？因为 iframe 是子框架，所以您可以完全访问父框架的 DOM 和内存。另外，请说明您的标记是 iframe 还是父级。

@Kevin M，我可以看出我的描述是多么令人困惑，我真的很努力地用语言表达我想要实现的目标。我编辑了我的代码以显示哪个是父级或 iframe。您关于在关闭时将用户意图（我假设您的意思是表单数据？）从 iframe 传递给父级，然后让父级提交数据的评论是对我目标的一个很好的描述。它肯定更容易理解。现在我该从哪里开始尝试正确地做到这一点。

@Kevin M，考虑到这一点，我是否可以先将表单中的 onSubmit 更改为可能会在父级上调用某种脚本的 onClick；然后关闭 Colorbox 窗口并提交表单？

是的，从我所知道的和做过的事情来看，这些方面的事情值得考虑。

【参考方案1】：

您可以尝试添加延迟：

onSubmit="window.setTimeout(function()parent.$.fn.colorbox.close();, 150);"

将 150 更改为确保发送请求所需的任何值。

详细了解 setTimeout here。