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 tohref
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.
Post a Comment for "Add Target=“_top” To Ink That Is Inside The Fancybox Iframe"