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 the link, it will reload the page and load the clicked link. How do I add a target="_top" attribute to the all links?
e.g.
$("iframe").on("load", function () {
$("a").each(function() {
$(this).attr('target', '_top');
});
})
Assuming that in your child page you have regular links like :
<p>This link opens <a href="http://google.com">GOOGLE</a></p>
<p>This link opens <a href="http://jsfiddle.net">JSFIDDLE</a></p>
<p>This link opens <a href="http://stackoverflow.com">STACKOVERFLOW</a></p>
You could set the attribute onclick
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
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.