提交后关闭 ColorBox iFrame答案

【问题标题】：Close ColorBox iFrame after submit提交后关闭 ColorBox iFrame
【发布时间】：2010-01-05 23:35:57
【问题描述】：

我正在使用 jQuery ColorBox 来显示购物车项目。当用户在 iFrame 中输入数量（使用颜色框打开）并单击提交按钮时，我希望 iFrame 关闭并自动刷新主窗口（父窗口）。

我的意思是在 iFrame 上提交数据后我想要两件事：

iFrame 自动关闭。
父窗口自动刷新。

请帮帮我。

【问题讨论】：

标签： jquery iframe colorbox

【解决方案1】：

在打开 iframe 时在父窗口上使用它：

$(document).ready(function(){
    $(".chpic").colorbox({width:"80%", height:"80%", iframe:true, 
        onClosed:function(){ location.reload(true); } });
});

这将关闭 iframe 页面内的 iframe：

parent.$.fn.colorbox.close();

【讨论】：

@nik 是否有将参数传递给 onClosed 方法？
抱歉@Anthony 回复晚了，很长时间后来到这里。您始终可以从 iframe 调用父窗口上的函数，例如： window.parent.functionInParent('myData');就在 parent.$.fn.colorbox.close(); 之前

【解决方案2】：

在Frame 1中提交表单后，您可以使用以下JavaScript重新加载父框架：

window.parent.location.reload(true);

【讨论】：

我必须在哪里写这个？n我框架或父html？我认为这在 jquery colorbox 中不起作用
我在颜色框中的关闭按钮上使用了它，效果很好：关闭 iframe 并重新加载父页面。

【解决方案3】：

<form target="_top">

【讨论】：

【解决方案4】：

打开 jquery.colorbox.js 找到这两段代码：

$close.click(function () {
  publicMethod.close(); 
});


$overlay.click(function () {
  if (settings.overlayClose) {
    publicMethod.close();
  }
});

替换为这些 - 注意添加“window.location.reload();”

$close.click(function () {
  publicMethod.close();
  window.location.reload();         
});


$overlay.click(function () {
  if (settings.overlayClose) {
    publicMethod.close();
    window.location.reload();
  }
});

【讨论】：

修改原始来源听起来是个坏主意

【解决方案5】：

只需简单地模拟单击关闭按钮，如下所示：

$("#cboxClose").click();

【讨论】：

这是唯一为我工作的。非常聪明。其他解决方案显然无效，因为您只能使用打开它的相同 Javascript 关闭颜色框。

【解决方案6】：

像这样给表单标签：

<form target="_top">

然后提交后：

response.redirect("your form")

【讨论】：

【解决方案7】：

如果您使用的是 Drupal 7，您可能需要使用以下替代方案：

parent.jQuery.colorbox.close();

在 D7 中，$.fn 似乎被 jQuery 对象所取代。

我只是设置了一个菜单回调，它只是返回了这个：

return <<<EOF
<script type="text/javascript">
  <!--//--><![CDATA[//><!--
  parent.jQuery.colorbox.close();
  //--><!]]>
</script>
EOF;

对我来说似乎工作得很好:)

【讨论】：

【解决方案8】：

如果你想留在当前页面：

在应用颜色框的父页面上编写以下代码。

$(document).ready(function(){

 $(".tu_iframe_800x600").colorbox({width:"80%", height:"100%", iframe:false 

  });
});

以及您要关闭颜色框的当前页面上的以下代码parent.$.fn.colorbox.close();

注意：请将 .tu_iframe_800x600 替换为调用颜色框的 html 类...

【讨论】：

请编辑您的帖子并格式化代码以使其可读