FancyBox iFrame - Link in iFrame to close FancyBox and open in original parent page

Question

I have FancyBox link that opens a FancyBox (lightbox) iFrame php page. This php page has links on it and I want any of the links when clicked to close the FancyBox Lightbox and open the link in the original parent window... Here is my code so far...

   <a class="fancyimg" data-fancybox-type="iframe" onClick="$.fn.fancybox.close();" href="remote.php" >Launch Remote Control</a>

{literal}
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

  <script type="text/javascript">
  $(".fancyimg").fancybox({
 'width'        : '30%',
 'height'       : '92%',
 'autoScale'        : false, 
 'type'         : 'iframe',
 'overlayShow'   : false,
 'transitionIn'  : 'elastic',
 'transitionOut' : 'elastic'
});


</script>

Any ideas?

you could only do that if you have control over the opened page AND both are within the same domain. BYW, the fancybox API options in your code are for v1.3.4 and not compatibles with v2.x — JFK
I have control over the opened page and both are on the same domain, can you give me an example of how I can set this up to work? — Matt L

JFK JFK · Accepted Answer · 2014-12-03T01:53:04

What you can do is to set an onclick attribute on each link of the iframed page (remote.php) that calls a function in the parent page and passes their href as parameter.

You could do this on-the-fly within the fancybox afterShow callback, so no need to hard-code the attribute in the iframed page.

Then the function in the parent page should close fancybox using the $.fancybox.close() method and reload the page with the URL passed from the iframed page.

The code that goes in the parent page :

// this function gets the href of the clicked link in the iframed page
// then closes fancybox
// then reloads the current page with the new href
function closeFancybox(href){
  jQuery.fancybox.close();
  window.location.href = href;
}

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        afterShow : function () {
            // set the onclick attribute on each link of the iframed page
            // then passes the corresponding href to the parent page function
            $(".fancybox-iframe").contents().find("a").attr("onclick", "parent.closeFancybox(this.href)");
        },
        // other API options
    })
}); // ready

See DEMO at picssel.com and feel free to explore the source code.

Another (cleaner) option, without setting an onclick attribute, is to bind the click event directly within the afterShow callback like :

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        afterShow : function () {
            // bind a click event on each link of the iframed page
            // then call the closeFancybox and pass the corresponding href
            $(".fancybox-iframe").contents().find("a").on("click", function () {
                closeFancybox(this.href);
            });
        }
    })
}); // ready

See alternative DEMO

IMPORTANT: Both solutions are subject to the same-origin policy so it's assumed both pages belong to the same domain.

NOTE : this is for fancybox v2.x

FancyBox iFrame - Link in iFrame to close FancyBox and open in original parent page

1 Answers