Extend Fancybox inside an iFrame to outside

Question

I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).

Does anybody knows how to do that?

Answer 1

If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.

Parent Window (contains fancybox script, css and iframe)

<iframe src="child-page.htm" height="250" width="500"></iframe>

Child Page (contains script to call fancybox in the parent)

$('a').click(function() {
  // target the parent window (same domain only)
  // then call fancybox in the parent
  // You can add any HTML you want inside the fancybox call
  window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});

Answer 2

It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.

Your fancybox cannot extend out of the iframe no matter what you do, but with some work you could call to one on the parent page via JavaScript.

This post will answer your question in both directions (parent -> iframe, iframe -> parent): Invoking JavaScript code in an iframe from the parent page

As a side note, iframes fell out of vogue about 5 years ago. I'd avoid them in any new production.

Cheers. :)