在 iframe 父级中显示 jquery prettyPhoto 灯箱
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1483227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display jquery prettyPhoto lightbox in iframe parent
提问by Andrew
I am using jquery prettyphoto 2.5.3 and I was wondering how I can get the light box to display in the parent window of an iframe when an image link inside the iframe is selected?
我正在使用 jquery Prettyphoto 2.5.3，我想知道如何在 iframe 内的图像链接被选中时让灯箱显示在 iframe 的父窗口中？
Here's my code:
这是我的代码：
Page in the 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>
When I load up this page on its own the lightbox works fine.
当我自己加载这个页面时，灯箱工作正常。
Iframe code:
框架代码：
<html>
<head>
</head>
<body>
<iframe src="inner.html"/>
</body>
</html>
However, when I load up the page with the iframe and click on the image link in the page that is in the iframe I want the lightbox to display in the parent window and not in the iframe.
但是，当我使用 iframe 加载页面并单击 iframe 中页面中的图像链接时，我希望灯箱显示在父窗口中而不是 iframe 中。
回答by Waleed Amjad
Try this selector: $("#myid", top.document)
试试这个选择器： $("#myid", top.document)
The top.document tells the selector to target the myid element which exists in the topmost document (your parent page). In order for this to work, jQuery must be loaded in the file which is viewed through the iframe.
top.document 告诉选择器定位存在于最顶层文档（您的父页面）中的 myid 元素。为了使其工作，必须在通过 iframe 查看的文件中加载 jQuery。
Source: http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1
来源：http: //groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1
EDIT
编辑
Ok the only way this will work is:
好的，这将起作用的唯一方法是：
Remove the following code from your real page (inner.html, the one contained in the iframe):
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });Now in your iframe page, add:
<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>Also add the following JS code:
$(function() { $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } ); });
从您的真实页面（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; } ); });
That should do the trick, but it will then ONLY work for the iframe page, and not directly from within the real page.
这应该可以解决问题，但它只适用于 iframe 页面，而不是直接在真实页面中工作。
回答by Alex Marco
found this somewhere
在某处找到了这个
<base target="_parent" />
<base target="_parent" />
put it inside the head of IFRAME
把它放在 IFRAME 的头部
回答by Fabricio
I solved the problem with the iframe using copies of data. See the Script code at Main Page: Note: In my code there is an image that starts the gallery and the gallery is not visible, the image Id is "btngaleria".
我使用数据副本解决了 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();
});
});
The iframe html code is:
iframe html 代码是：
<iframe src="home.asp" name="iPrincipal" id="iPrincipal" frameborder="0" width="100%" height="540"></iframe>
And the div at the the bottom of the page that receives the copied data:
以及接收复制数据的页面底部的div：
<div id="falso" style="display:none; visibility:hidden"><ul id="galeria" class=""></ul></div>
I made tests for FF and IE and run normally.
我对FF和IE进行了测试并正常运行。
回答by Andrew
The code changes that I made were:
我所做的代码更改是：
- Added a new true/false setting in the settings that start on line 18. i.e.
displayIframeContentsInParent: false, On around line 92 in the
if(theGallery)if block check if the new setting has been set to true and if so, search the iframe contents for more images in the gallery: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')); }); }On around line 125 in the open function: in the
if($.browser.msie && $.browser.version == 6)if else block, add the following to also hide combo boxes in the iframe:if(settings.displayIframeContentsInParent) { $("iframe").contents().find('select').css('visibility','hidden'); }Finally on around line 300 in the close function: in the
if($.browser.msie && $.browser.version == 6)if else block, add the following to make the combo boxes in the iframe visible again:if(settings.displayIframeContentsInParent) { $("iframe").contents().find('select').css('visibility','visible'); }
- 在第 18 行开始的设置中添加了一个新的 true/false 设置。即
displayIframeContentsInParent: false， 在
if(theGallery)if 块的第 92 行左右，检查新设置是否已设置为 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')); }); }在 open 函数的第 125 行附近：在
if($.browser.msie && $.browser.version == 6)if else 块中，添加以下内容以隐藏 iframe 中的组合框：if(settings.displayIframeContentsInParent) { $("iframe").contents().find('select').css('visibility','hidden'); }最后在 close 函数中的第 300 行：在
if($.browser.msie && $.browser.version == 6)if else 块中，添加以下内容以使 iframe 中的组合框再次可见：if(settings.displayIframeContentsInParent) { $("iframe").contents().find('select').css('visibility','visible'); }
Of course, when you use pretty photo now you will need to set the new setting to true so that it will search the iframe contents for other images to display i.e.
当然，当你现在使用漂亮的照片时，你需要将新设置设置为 true，以便它会搜索 iframe 内容以显示其他图像，即
$("a[rel='prettyphoto']").each(function() {
$(this).prettyPhoto(displayIframeContentsInParent: true);
});
I have posted a link to these changes in the prettyPhoto support forum so hopefully, these changes will get incorporated into the prettyPhoto source.
我已经在prettyPhoto 支持论坛中发布了这些更改的链接，因此希望这些更改将合并到prettyPhoto 源中。
回答by i3laze
I finished with this:
我完成了这个：
<script type="text/javascript">
$('iframe').load(function(){
$(this).contents().find("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
It looks through all iframes on the main page. JQuery inside iframe's code is not required.
它查看主页上的所有 iframe。不需要 iframe 代码中的 JQuery。
That's all about iFrame's content must be loaded before you try to access it:
这就是在您尝试访问之前必须加载 iFrame 的内容的全部内容：
http://grasshopperpebbles.com/ajax/using-jquery-to-access-iframe-content/
http://grasshopperpebbles.com/ajax/using-jquery-to-access-iframe-content/
