FancyBox iFrame - 在iFrame中链接以关闭FancyBox并在原始父页面中打开

时间:2014-12-02 23:25:08

标签: javascript jquery fancybox fancybox-2

我有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>

有什么想法吗?

1 个答案:

答案 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