Question

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

有什么想法吗？

Answer 1

您可以做的是在 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

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

1 个答案: