iframe 부모에 jQuery PrettyPhoto Lightbox를 표시합니다
-
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 이것이 작동하는 유일한 방법은 다음과 같습니다.
실제 페이지에서 다음 코드를 제거하십시오 (Inner.html, iframe에 포함 된 것) :
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });
이제 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>
또한 다음 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/