Question

我正在使用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>

当我自己加载此页面时，灯箱工作正常。

iframe代码：

<html>
<head>
</head>

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

但是，当我使用iframe加载页面并点击iframe中页面中的图片链接时，我希望灯箱显示在父窗口中而不是iframe中。

Answer 1

尝试使用此选择器：$("#myid", top.document)

top.document告诉选择器将myid元素作为目标存在于最顶层的文档（您的父页面）中。为了这个要工作，jQuery必须加载到通过查看的文件中 iframe中。

来源：http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1

修改

好的唯一方法是：

从您的真实网页中删除以下代码（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页面，而不是直接来自真实页面。

Answer 2

在某处找到了

<base target="_parent" />

把它放在IFRAME的头部

Answer 3

我使用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做了测试并正常运行。

Answer 4

我所做的代码更改是：

在第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');
}
```
最后在关闭函数的第300行：在if($.browser.msie && $.browser.version == 6) if else块中，添加以下内容以使iframe中的组合框再次可见：
```
if(settings.displayIframeContentsInParent)
{ 
  $("iframe").contents().find('select').css('visibility','visible');
}
```

当然，当你现在使用漂亮的照片时，你需要将新设置设置为true，以便它搜索iframe内容以显示其他图像。

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

我在prettyPhoto支持论坛上发布了这些更改的链接，希望这些更改能够合并到prettyPhoto源中。

Answer 5

我说完了：

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

查看主页上的所有iframe。

中不需要iframe内部的JQuery代码。

在您尝试访问iFrame的内容之前，必须先加载所有内容：

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

在iframe父级中显示jquery prettyPhoto灯箱

5 个答案: