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

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

你可以做的是设置onclick中的iFrame网页（remote.php）的每一个环节上的属性 ，在调用一个函数 parent页面并通过他们的href作为参数。

你可以做到这一点的fancybox内的即时afterShow在iframed网页上的回调，所以没必要硬编码的属性 。

然后在父页面中的功能应该关闭的fancybox使用$.fancybox.close()方法，并与来自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 属性 ）是将click 事件直接绑定在afterShow回调中，例如：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        afterShow : function () {
            // bind a click event on each link of the iframed page
            // then call the closeFancybox and pass the corresponding href
            $(".fancybox-iframe").contents().find("a").on("click", function () {
                closeFancybox(this.href);
            });
        }
    })
}); // ready

查看替代DEMO

重要说明 ：两种解决方案都遵循同源策略，因此假定两个页面都属于同一域。

注意 ：这是为fancybox v2.x