Question

我希望在关闭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，并在框关闭时仍然可以刷新父页面？谢谢！

Answer 1

$(".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;
}

Answer 2

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

Answer 3

对我来说，下一个代码可以正常工作：

$("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）。

Answer 4

除了显而易见的缺失，你说你已经修复了IMO，这不是一个花哨的问题，而是一个父刷新问题。

我发现让一个框架的父级重新加载是一个挑战，因为有多种方法可以“理论上”实现这一目标，但“大部分”根本不能在实践中发挥作用，更糟糕但实际上并没有出现是我测试的网络浏览器引起的任何错误。

以下是适用于Chrome，FF，IE的代码：

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

这基本上表示将父href设置为当前实际上导致页面刷新的任何内容。尝试一下，它应该运作良好。

实际上这一行：

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

可以与框架（当然是父框架）或没有框架一起使用来简单地刷新网页。 HTH。

Answer 5

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

Answer 6

解决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); }

Fancy ver 1.3.x

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

1000 = 1秒。

Answer 7

链接刷新：

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>

Answer 8

您只需要写两行来关闭fancybox，然后关闭以重新加载已打开fancybox的父页面。

要注意的一件事是，如果您将使用window.opener尝试它，它将无法工作，因为当涉及到window.opener时，fancybox不会被视为父窗口的子窗口

还有一件事是window.opener不能用于Windows手机以及IE，因为IE已经很愚蠢了。

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

Answer 9

我知道这是一篇非常老的文章，但是这里有一个新的答案，希望对您有所帮助。我在网站查询页面上使用fancybox来弹出灯箱以进行读取/删除。当我在灯箱中删除查询时，我希望家长刷新以显示当前查询列表减去刚删除的查询列表。投票反对对我没有帮助（因为它可能引用的是JS文件的旧版本）。

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

afterClose: n.noop,

到

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

几天来一直困扰着我，但现在不用担心。

Answer 10

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

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

Answer 11

使用Shopify中的fancybox关闭表单时刷新或重新加载

我在Shopify上使用它，但这也适用于其他

  jQuery(".add-device").fancybox({
    maxWidth  : 970,
    maxHeight : 700,
    fitToView : false,
    width     : '90%',
    height    : '90%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    beforeClose: function() {
      device_has_subs = false;
      $("#mac_address").prop("readonly", false);
    },
    afterClose    : function() {
      window.location.reload(true);
        }
  });

这里只有afterClose正在播放任务我们也可以写父而不是窗口

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

如果只是在shopify中重置表单，那么在shopify中某些时候$（“form”）[0] .reset（）不起作用，所以使用迭代我们可以清空表单值

  jQuery(".add-device").fancybox({
    maxWidth  : 970,
    maxHeight : 700,
    fitToView : false,
    width     : '90%',
    height    : '90%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    beforeClose: function() {
      device_has_subs = false;
      $("#mac_address").prop("readonly", false);

      var array_element = document.getElementById("form_id");
      if (array_element){

        for (i=0; i < array_element.length; i++){
            element = array_element[i].type.toLowerCase();
            switch(element){
              case "text":
                  array_element[i].value = "";
                  break;
              case "hidden":
                  array_element[i].value = "";
                  break;
              case "email":
                  array_element[i].value = "";
                  break;
              case "checkbox":
                  if(array_element[i].checked){
                    array_element[i].checked = false;
                  }
                  break;
              case "select-one":
                  array_element[i].selectedIndex = -1;
                  break;
              case "select-multi":
                  array_element[i].selectedIndex = -1;
                  break;
              default:
                  break;
          }

        }

      }

    },
  });

form_id是表单id

Answer 12

＆＃39; onClosed＆＃39; ：function（）{parent.location.reload（true）; }

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

12 个答案: