FancyBox iFrame - ссылка в iFrame, чтобы закрыть FancyBox и открыть исходную родительскую страницу

Question

У меня есть ссылка FancyBox, которая открывает страницу iFrame FancyBox (lightbox). Это 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атрибут на каждом звене фреймах страницы (remote.php), который вызывает функцию в parent страницы и передает их href в качестве параметра.

Вы не могли бы сделать это на лету в FancyBox afterShow обратного вызова, так что нет необходимости прописывать коде атрибут в фреймах страницу.

Тогда функция в родительской странице следует закрыть FancyBox с использованием метода $.fancybox.close() и перезагрузите страницу с 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 

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