Fancy Box - how to refresh parent page when close iframe popup?

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

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 2

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 3

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

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

Answer 5

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).