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並在原始父級頁面中打開

回答

相關問題