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

Question

I want my parent page to refresh when I close a Fancy Box popup frame. I have a login page inside the popup, so I need the parent page to refresh to show the new login state when the Fancy Box closes.

---

I can get it to work without the iFrame code:

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

---

But I can't get it to work with the iFrame code:

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

---

The problem is to do with this line:

'type' : 'iframe'


As soon as I add that line, the popup stops working.

Can anyone suggest a solution as to how I can get an iframe to popup in Fancy Box, and still get the parent page to refresh when the box closes? Thanks!

Answer 1

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

Alternatively:

Go to your jquery.fancybox.js file and go line 1380 it is look like this and add 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

Besides the obvious missing , which you say you have fixed IMO this is not a fancybox issue but rather a parent refresh issue.

I have found it to be a challenge to get a parent of a frame to reload as there are multiple ways to "theoretically" achieve this but "most" simply do NOT work in practice and worse yet there really doesn't appear to be any error raised by the web browsers I tested with.

Here is code that works well for me on Chrome, FF, IE:

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

This basically says set the parent href to whatever it is currently which in effect results in a page refresh. Try it out and it should work well.

In fact the line:

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

can be used with frames (from the parent of course) or without frames to simply refresh a web page. HTH.

Answer 4

For me next code works ok:

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

I can't say exactly, but maybe the reason in using "onCleanup" (actually I didn't try use onClosed).

Answer 5

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

Answer 6

A work around to avoid having POSTDATA Warning when you close the iFrame

1) Please Create form :

<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) add this lines at the end of your Fancy-Box:

Fancy ver 2.xx

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

Fancy ver 1.3.x

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

1000 = 1 second.

Answer 7

link refresh:

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

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

you can give:

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

or condition, for example,

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

Answer 8

You just need to write two lines to close the fancybox and after close to reload the parent page on which you have opened your fancybox.

One thing to be notices is that if you will try it with window.opener it not going to work as fancybox is not treated as a child window of the parent when it comes to window.opener

One more thing is that window.opener is not going to work for windows phone and also with IE, as IE is already stupid.

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

Answer 9

Well I know this is an extremely old post but here's a newer answer that I hope helps someone out there. I am using fancybox on a page with my website inquiries to pop up in a lightbox to read / delete. When I delete an inquiry in the light box I wanted the parent to refresh to show a current list of inquiries minus the one I just deleted. The upvoted comment didn't help me (as it is probably referencing an older version of the JS file).

On line 105 of jquery.fancybox.js (v3.5.7) change:

afterClose: n.noop,

to

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

It's been irritating me for a few days but it now works no worries.

Answer 10

Refresh or reload on closing the form using fancybox in Shopify

I was using this on Shopify but this will work on other also

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

here only afterClose is playing the task we can also write parent instead of window

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

If just reset the form in shopify then, In shopify sometime $("form")[0].reset() not works so using iteration we can empty the form value

  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 is the form id

Answer 11

When using the examples with 'location.reload' you get a browser pop that lets you know it needs to reload the page. I fired a button click to refresh the page and no warning popup.

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

Answer 12

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