我有FancyBox链接打开FancyBox(灯箱)iFrame php页面。这个php页面上有链接,我想要点击任何链接关闭FancyBox Lightbox并在原始父窗口中打开链接...这是我的代码到目前为止...
<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>
有什么想法吗?
答案 0 :(得分:0)
您可以做的是在 iframed 页面的每个链接上设置onclick
属性( remote.php )在parent
页面中调用函数并将其href
作为参数传递。
您可以在fancybox afterShow
回调中即时执行此操作,因此无需在 iframed 页面中对属性进行硬编码。
然后父页面中的函数应使用$.fancybox.close()
方法关闭fancybox,并使用从 iframed 页面传递的URL重新加载页面。
父页面中的代码:
// 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
请参阅 picssel.com 上的 DEMO ,随时浏览源代码。
另一个(更干净)选项,未设置onclick
属性,就是直接在{{1}内绑定click
事件回调像:
afterShow
请参阅其他 DEMO
重要:两个解决方案均受same-origin policy约束,因此假设两个网页属于同一个网域。
注意:这适用于fancybox v2.x