iframe 부모에 jQuery PrettyPhoto Lightbox를 표시합니다

StackOverflow https://stackoverflow.com/questions/1483227

  •  18-09-2019
  •  | 
  •  

문제

jQuery PrettyPhoto 2.5.3을 사용하고 있으며 iframe 내부의 이미지 링크가 선택 될 때 Iframe의 부모 창에 라이트 박스를 표시 할 수있는 방법이 궁금합니다.

내 코드는 다음과 같습니다.

iframe의 페이지 :

<html>
<head>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>

<body>
    <a href="animage.jpg" rel="prettyPhoto">
                <img src="animage.jpg" height="200" width="200"/>
    </a>
            <script type="text/javascript" charset="utf-8">
              $(document).ready(function(){
                 $("a[rel^='prettyPhoto']").prettyPhoto();
              });
    </script>
</body>

이 페이지를 자체적으로로드하면 Lightbox는 잘 작동합니다.

iframe 코드 :

<html>
<head>
</head>

<body>
    <iframe src="inner.html"/>
</body>
</html>

그러나 iframe으로 페이지를로드하고 iframe에있는 페이지의 이미지 링크를 클릭하면 Lightbox가 iframe이 아닌 부모 창에 표시되기를 원합니다.

도움이 되었습니까?

해결책

이 선택기를 시도하십시오. $("#myid", top.document)

Top.document는 선택기에게 최상위 문서 (부모 페이지)에 존재하는 MyID 요소를 타겟팅하도록 지시합니다. 이 작업을 수행하려면 jQuery가 iframe을 통해 볼 수있는 파일에로드되어야합니다.

원천: http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1

편집하다

OK 이것이 작동하는 유일한 방법은 다음과 같습니다.

  1. 실제 페이지에서 다음 코드를 제거하십시오 (Inner.html, iframe에 포함 된 것) :

    <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
         $("a[rel^='prettyPhoto']").prettyPhoto();
      });

  2. 이제 iframe 페이지에서 다음을 추가하십시오.

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

  3. 또한 다음 JS 코드를 추가하십시오.

    $(function() {
    $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } );
});

그것은 트릭을 수행해야하지만, 그것은 실제 페이지 내에서 직접적으로가 아닌 iframe 페이지에서만 작동합니다.

다른 팁

어딘가에 이것을 찾았습니다

<base target="_parent" />

Iframe의 머리 안에 넣으십시오

데이터 사본을 사용하여 iframe의 문제를 해결했습니다. 메인 페이지의 스크립트 코드를 참조하십시오. 참고 : 내 코드에는 갤러리를 시작하고 갤러리가 표시되지 않는 이미지가 있으며 이미지 ID는 "btngaleria"입니다. 

$("#iPrincipal").load(function(){
  $("#iPrincipal").contents().find("#btngaleria").click(function() { 
    var temp=$("#iPrincipal").contents().find("#galeria").html();
    $("#galeria").html(temp);
    $("#galeria:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',slideshow:4000, autoplay_slideshow: true});
    $("#galeria li:first a").click();
  });
});

iframe html 코드는 다음과 같습니다.

<iframe src="home.asp" name="iPrincipal" id="iPrincipal" frameborder="0" width="100%" height="540"></iframe>

그리고 복사 된 데이터를 수신하는 페이지 하단의 div :

<div id="falso" style="display:none; visibility:hidden"><ul id="galeria" class=""></ul></div>

나는 FF와 IE에 대한 테스트를했고 정상적으로 실행합니다.

내가 만든 코드 변경은 다음과 같습니다.

  • 18 행에서 시작하는 설정에 새로운 True/False 설정이 추가되었습니다. 즉 displayIframeContentsInParent: false,

  • 92 라인에 if(theGallery) 블록을 확인한 경우 새 설정이 true로 설정되었는지 확인하고 그렇다면 갤러리에서 Iframe 내용을 검색하십시오.

    if(settings.displayIframeContentsInParent)
{
   $("iframe").contents().find('a[rel*='+theGallery+']').each(function(i) {
      if($(this)[0] === $(link)[0]) setPosition = i;
 images.push($(this).attr('href'));
 titles.push($(this).find('img').attr('alt'));
 descriptions.push($(this).attr('title'));
   });
}

  • 열린 기능의 줄 125 주위에 : if($.browser.msie && $.browser.version == 6) 다른 차단이라면 다음을 추가하여 iframe에서 콤보 상자를 숨기십시오.

    if(settings.displayIframeContentsInParent)
{
    $("iframe").contents().find('select').css('visibility','hidden');
}

  • 마지막으로 가까운 기능의 300 행에 : if($.browser.msie && $.browser.version == 6) 다른 차단이라면 다음을 추가하여 iframe의 콤보 상자를 다시 볼 수 있도록하십시오.

    if(settings.displayIframeContentsInParent)
{ 
  $("iframe").contents().find('select').css('visibility','visible');
}

물론 지금 예쁜 사진을 사용하면 새로운 설정을 true로 설정하여 다른 이미지의 iframe 내용을 검색하여 IE를 표시해야합니다.

$("a[rel='prettyphoto']").each(function() {
  $(this).prettyPhoto(displayIframeContentsInParent: true);
});

PrettyPhoto Support Forum에 이러한 변경 사항에 대한 링크를 게시 했으므로 이러한 변경 사항이 PrettyPhoto 소스에 포함되기를 바랍니다.

나는 이것으로 끝났다 :

<script type="text/javascript">
    $('iframe').load(function(){
    $(this).contents().find("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

메인 페이지의 모든 iframes를 살펴 봅니다. Iframe의 코드 내부의 jQuery는 필요하지 않습니다.

이는 Iframe의 콘텐츠에 액세스하려고 시도하기 전에로드해야합니다.

http://grasshopperpebbles.com/ajax/using-jquery-to-access-iframe-content/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top