FancyBox iFrame - FancyBox를 닫고 원래 부모 페이지에서 열려면 iFrame에 연결하십시오.

Question

FancyBox (lightbox) iFrame PHP 페이지를 여는 FancyBox 링크가 있습니다. 이 PHP 페이지가에 링크를 가지고 있는데이 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> 

모든입니다 아이디어?

Answer 1

은 당신이 할 수있는 parent 페이지에 기능를 호출하고 매개 변수로 자신의 href를 전달 페이지 (remote.php)를 iframe이 의 각 링크상의 onclick속성을 설정하는 것입니다. fancybox afterShow 콜백 내의 온 - 더 - 플라이

당신은 하드 코드 그래서 필요를이 작업을 수행하지 수 에서 속성는 페이지를 iframe이.

그 다음 상위 페이지 내의 함수는 $.fancybox.close() 방법을 사용 fancybox 닫고 로부터 전달 된 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 

이 picssel.com에 DEMO를 참조 소스 코드를 찾아 주시기 바랍니다.

---

또 다른 (클리너) 옵션은 onclick속성을 설정하지 않고, 같은 afterShow 콜백 내에서 직접 click이벤트을 결합하는 것입니다 참조

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의 버전 2.x