javascript - Add target=“_top” to ink that is inside the fancybox iframe -
i have page setup accessed through fancybox iframe. how can link inside fancybox iframe, load in parent window of iframe? if user clicks link, reload page , load clicked link. how add target="_top" attribute links?
e.g.
$("iframe").on("load", function () { $("a").each(function() { $(this).attr('target', '_top'); }); })
assuming in child page have regular links :
<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 set attribute onclick each link within parent page using fancybox aftershow callback. then, set parent.location.assign() , $.fancybox.close() onclick attribute value.
this code 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 iframed page close fancybox , load referred url in parent (top) page.
notes :
- we need pass
this.hrefwithin.assign()method, correspondshrefvalue of each link. - we don't need include jquery in child page.
- working iframes subject same-origin policy
see demo : http://www.picssel.com/playground/jquery/openurlfromchildpage_13apr14.html
Comments
Post a Comment