子页面提交时关闭 iframe fancybox 并重新加载父页面答案

【问题标题】：Close iframe fancybox when child page submitted and reload parent page子页面提交时关闭 iframe fancybox 并重新加载父页面
【发布时间】：2013-01-10 07:28:39
【问题描述】：

我的页面上有 iframe fancybox。在子页面上，单击“添加按钮”时，我向 DB 添加了一些内容。在这个过程之后，我想关闭fancybox并重新加载父页面。我该怎么做？

【问题讨论】：

您是否使用 jquery ajax 进行提交？那么有可能……
ajax 提交很容易... k.. 提交页面加载后那个时间对话框可以关闭？

标签： c# jquery fancybox

【解决方案1】：

这应该在页面重新加载时调用..

   window.parent.closeDialogFormSubmit();

   //Or

   window.top.parent.closeDialogFormSubmit();

这个closeDialogFormSubmit 函数应该在该页面上打开的精美框中。 closeDialogFormSubmit 为花哨的盒子关闭代码编写代码。

函数应该写在$(document).ready(function(){});或$(function(){});之外，否则找不到函数并给出未定义的错误。

【讨论】：

【解决方案2】：

1)。在子页面中

使用API方法parent.$.fancybox.close()

你可以创建一个像这样的按钮：

<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>

请记住这些页面之间的交互受same origin policy 的约束，因此如果子页面位于另一个域中，parent.$.fancybox.close() 可能无法正常工作。

EDIT : 如果在提交表单后要关闭子页面，则使用form 标签中的onsubmit 属性设置关闭方法，如：

<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">

更多参考和演示请参见this post。

2)。在父页面中

将afterClose 回调添加到您的自定义脚本中，例如：

$(".fancybox").fancybox({
    afterClose : function() {
        location.reload();
        return;
    }
});

...关闭fancybox后重新加载页面。见JSFIDDLE

【讨论】：