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

我有FancyBox链接打开FancyBox（lightbox）iFrame php页面。这个PHP页面有链接，我想任何时候点击关闭的fancybox灯箱并打开原始的父窗口中的链接的链接...这里是我到目前为止的代码...FancyBox iFrame - iFrame中的链接关闭FancyBox并在原始父级页面中打开

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

任何想法？

来源

2014-12-02 user1683991

你只能这样做，如果你有在打开的页面控制，无一不是在同一个域中。 BYW，你的代码中的fancybox API选项适用于v1.3.4，而不是兼容v2.x – JFK 2014-12-03 00:42:05

我可以控制打开的页面，并且它们都在同一个域中，你可以给我一个如何设置它的例子上班？ – user1683991 2014-12-03 00:51:57

你可以做的是将的各个环节设置onclick属性的iFrame页面（remote.php），在parent页面调用一个函数和他们传递作为href参数。

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

然后在父页面中的功能应该关闭的fancybox使用$.fancybox.close()方法，并与来自传递的URL重新加载页面的iframe页。

是云在父页面的代码：

// 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

见DEMO在picssel.com和随意浏览源代码。

另一个（清洁器）的选项，而不设置一个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

重要提示：两种解决方案都受到same-origin policy的约束，因此假定两个页面属于同一个域。

注意：这是对的fancybox V2.X

来源

2014-12-03 01:53:04 JFK

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

回答

相关问题