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