Fancy Box - 如何在关闭iframe弹出窗口时刷新父页面？

Question

Fancy Box - 如何在关闭iframe弹出窗口时刷新父页面？

13

当我关闭一个Fancy Box弹出框时，我希望我的父页面能够刷新。我在弹出框中有一个登录页面，所以当Fancy Box关闭时，需要刷新父页面以显示新的登录状态。

如果没有iFrame代码，我可以让它正常工作：

<script type="text/javascript">
 $(document).ready(function() {
  $("a.iframeFancybox1").fancybox({
   'width': 800,
   'height': 450,   
   'onClosed': function() {   
     parent.location.reload(true); 
    ;}
   });
 });
</script>

但我无法使用iFrame代码使其正常工作：

<script type="text/javascript">
 $(document).ready(function() {
  $('a.iframeFancybox1').fancybox({
   'width': 800,
   'height': 450,
   'type' : 'iframe'
   'onClosed': function() {
     parent.location.reload(true); 
    ;}
   });
 });
</script>

这个问题与以下代码有关：

'type' : 'iframe'

当我添加那行代码后，弹出窗口停止工作。

有人能建议一种解决方案，让我能够在Fancy Box中弹出一个iframe，并在关闭框时仍然能够刷新父页面吗？谢谢！

- dave

1

你是不是在“iframe”后面只是缺少了一个逗号？ - user11977

谢谢smerriman！是的。我漏了一个逗号。发现得好。我修复了它，但我仍然无法让它在关闭时重新加载页面。还有更多想法吗？ - dave

12个回答

10

$(".fancybox").fancybox({
            'width'             : '75%',
            'height'            : '65%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'hideOnOverlayClick': false,
            'onClosed'          : function() {
                                  parent.location.reload(true);
                                  }
        });

- adil

2

除了明显的缺失，你说你已经修复了，我认为这不是一个fancybox问题，而是一个父级刷新问题。

我发现使一个框架的父级重新加载是一个挑战，因为有多种“理论上”可以实现的方法，但是“大多数”在实践中根本行不通，更糟糕的是，在我测试的Web浏览器中似乎并没有出现任何错误。

以下是我在Chrome、FF和IE上运行良好的代码：

afterClose: function(){
    parent.location.href = parent.location.href;
},

这基本上是说将父级href设置为当前的值，从而实现页面刷新。尝试一下，应该可以很好地工作。

事实上，这行代码：

parent.location.href = parent.location.href;

可以与框架一起使用（当然是来自父级的）或者不使用框架，仅刷新网页。希望有所帮助。

- nikolaosinlight

2

对我来说，下面的代码可以正常工作：

$("a.ic-edit").fancybox({
            'width'     : '65%',
            'height'    : '85%',
            'autoScale'     : false,
            'titleShow' : false,
            'transitionIn'  : 'no',
            'transitionOut' : 'no',
            'scrolling'     : 'no',
            'type'          : 'iframe',
            onCleanup   : function() {
                return window.location.reload();
            }
       });

我不能确定，但也许使用"onCleanup"的原因是为了清理（实际上我没有尝试使用onClosed）。

- Vovkin

1

你只需要写两行代码来关闭fancybox，然后在关闭之后重新加载打开fancybox的父页面。

需要注意的一件事是，如果你尝试使用window.opener，它不会起作用，因为在window.opener方面，fancybox并没有被视为父窗口的子窗口。

还有一件事是，window.opener在Windows Phone和IE上都无法工作，因为IE已经很愚蠢了。

<script type="text/javascript">
parent.$.fancybox.close();
         parent.location.reload(true); 
</script>

- trig_php

1

链接刷新：

jQuery(function($){ 
    $('#refresh').click(function ()
        {      
            parent.location.reload();
    });
});

<a href="#" id="refresh">refresh</a>

你可以给：

setTimeout(function () {
            parent.location.reload(); 
        }, 1000);

或条件，例如：

<script>
if(formSend == true){
setTimeout(function () {
                parent.location.reload(); 
            }, 1000);
}
</script>

- websky

1

'onClosed': function() {
 parent.location.reload(true); 
;} // <----is it ok if you have an extra ';' here?

- n3ISe

1

一种避免在关闭iFrame时出现POSTDATA警告的解决方法

1）请创建表格：

<form name="RefreshForm" method="post" action="" >
<input name="Name1" value="Value1" type="hidden" />
<input name="DatafromPost1" value="ValuefromPOST1" type="hidden" />
<input name="DatafromPost2" value="ValuefromPOST2" type="hidden" />
</form>

2）在你的Fancy Box的末尾添加以下行：

Fancy ver 2.x.x

afterClose : function() { 
setTimeout('document.RefreshForm.submit()',1000); }

花哨版本1.3.x

     onClosed : function() { 
setTimeout('document.RefreshForm.submit()',1000); }

1000 = 1秒。

- LLukaso

1

我知道这是一个非常古老的帖子，但这里有一个新的答案，希望能帮助到某个人。我正在使用fancybox在我的网站查询页面上弹出一个灯箱来阅读/删除。当我在灯箱中删除一个查询时，我希望父级页面刷新，以显示当前的查询列表减去我刚刚删除的那个。最受欢迎的评论对我没有帮助（因为它可能引用了旧版本的JS文件）。

在jquery.fancybox.js（v3.5.7）的第105行更改：

afterClose: n.noop,

到

afterClose: function() {parent.location.reload(true);},

这几天一直让我感到烦恼，但现在已经可以正常工作了，毫无问题。

- B. Waikel

0

当使用带有“location.reload”的示例时，您会得到一个浏览器弹出窗口，让您知道它需要重新加载页面。我点击了一个按钮来刷新页面，没有警告弹出窗口。

$(".addDoc").colorbox({
    iframe: true, 
    width: "550px", 
    height: "230px",
    'onClosed': function() {
        $("#btnContSave").click();
    }
});

- Greg

OP正在使用fancybox......而不是colorbox，因此您示例中的选项将无法与fancybox一起使用。 - JFK

你有没有尝试过Fancybox？ ;) - JFK

@JFK ... 是的，我做了，而且效果非常好 :-) 按钮事件可以在这些框中的任何一个上触发，打开了许多可能性。使刷新页面变得轻松快捷，只需点击即可。 - Greg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kemal Can ÖZÇELİK · Accepted Answer

$(".fancybox").fancybox({
    type: 'iframe',
    afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS "afterClose"
        parent.location.reload(true);
    }
});

或者：

前往你的 jquery.fancybox.js 文件，找到第 1380 行代码如下，并添加 parent.location.reload(true);

afterClose: function (opts) {
    if (this.overlay) {
        this.overlay.fadeOut(opts.speedOut || 0, function () {
            $(this).remove();
            parent.location.reload(true);
        });
    }
    this.overlay = null;
}