Add Target=“_top” To Ink That Is Inside The Fancybox Iframe

I have a page setup that is accessed through a fancybox iframe. How can a link that is inside the fancybox iframe, load in the parent window of the iframe? So if the user clicks th

Solution 1:

Assuming that in your child page you have regular links like :

<p>This link opens <ahref="http://google.com">GOOGLE</a></p><p>This link opens <ahref="http://jsfiddle.net">JSFIDDLE</a></p><p>This link opens <ahref="http://stackoverflow.com">STACKOVERFLOW</a></p>

You could set the attributeonclick to each link from within the parent page using the fancybox afterShow callback. Then, set parent.location.assign() and $.fancybox.close() as the onclick attribute value.

This is the code for your parent page :

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type : "iframe",
        afterShow : function () {
            $(".fancybox-iframe").contents().find("a").attr("onclick", "parent.location.assign(this.href);parent.$.fancybox.close();")
        }
    });
}); // ready

Now, each link on the iframed page will close fancybox and load the referred URL in the parent (top) page.

NOTES :

• We need to pass this.href within the .assign() method, which corresponds to href value of each link.
• We don't need to include jQuery in the child page.
• Working with iframes is subject to the Same-origin policy

See demo : http://www.picssel.com/playground/jquery/openURLfromChildPage_13apr14.html

Solution 2:

If you are using Fancybox 3, you will want this slightly altered version:

jQuery(document).ready(function ($) {
    $("[data-fancybox]").fancybox({
        type : "iframe",
        onComplete : function () {
            $(".fancybox-iframe").contents().find("a").attr("onclick", "parent.location.assign(this.href);parent.$.fancybox.close();")
        }
    });
});

Adding this extra answer as this thread is about the only near useful thing that shows up in searches. I felt it was worth updating for the current version of Fancybox.