CODEWITHSUNDEEP
javascriptiframefancyboxparent-child
Cosmin
Cosmin

Reputation: 1490

Open fancybox(iframe) as a child?

I want, if possible, to open a fancybox as a child of a parent using iframe.

Is it possible to open an iframe ( constructed with fancybox ) and make the browser belive I have opened it using window.open so that functions like window.close() or window.opener.location.reload() still work ?

The fancybox code is simple :

$("#custom_alert").fancybox({
        'width'             : w,
        'height'            : h,
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe',
        //'scrolling'         : 'no'
    }).trigger('click');

EDIT : I cannot use functions like : 

function closePopup(){
     window.close();
     if(parent.jQuery().fancybox) {
      parent.jQuery.fancybox.close();
     }
}

I MUST use the window.close() function.

A fix for my problem can be also to tell me why I cannot rewrite the close function like I did with alert or confirm.

EDIT 2: Thanks Raohmaru and JFK, after seeing the fiddle worked, I have made the function I need, but a strange thing ( for me ) is happening :

The working code, if anybody else needs it is : 

(function() {
  var proxied = window.close;
  window.close = function() {
    if(parent.jQuery().fancybox) {
        parent.jQuery.fancybox.close();
    }
    else
        return proxied.apply(this, arguments);
  };
})();

This works for both fancybox and window.open cases.

My problem was this : I include some .js files in index :

overwrites
fancybox pack
general scripts

If I put that function in general scripts, it works perfectly, but if I put it in the overwrites js ( where it should be ) it doesn't work ( no console errors, just nothing happens ). I have tried swapping positions on the includes, but no luck.

This is why I couldn't make it work from the first place, because I always included it in the overwrites .js.

Upvotes: 4

Views: 1572

Answers (1)

JFK
JFK

Reputation: 41143

What you can do is to validate IF the page has been opened in fancybox and perform the proper fancybox methods, otherwise just use your regular javascript methods (i.e. window.close())

Having said that, within an opened page (either via window.open() or fancybox) you may have a function to close it like

function closePopup(){
 window.close();
}

associated to a close button/link like

<a href="javascript:;" onclick="closePopup()" >Close Window</a>

that for sure will close the popup window but not the fancybox so you can add the following : 

function closePopup(){
 window.close();
 if(parent.jQuery().fancybox) {
  parent.jQuery.fancybox.close();
 }
}

and that will work for either the popup window or fancybox.

Upvotes: 1

Related Questions