1

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

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

框架代码：

<html>
<head>
</head>

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

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

4

5 回答 5

2

试试这个选择器：$("#myid", top.document)

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

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

编辑

好的，唯一可行的方法是：

  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 页面，而不是直接来自真实页面。

于 2009-09-27T10:03:30.070 回答
2

在某处发现这个

<base target="_parent" />

把它放在 IFRAME 的头部

于 2011-12-06T04:04:18.943 回答
1

我使用数据副本解决了 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进行了测试并正常运行。

于 2011-02-23T20:49:03.697 回答
0

我所做的代码更改是：

  • 在从第 18 行开始的设置中添加了新的真/假设置。即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');
}

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

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

我已经在 prettyPhoto 支持论坛中发布了这些更改的链接，因此希望这些更改将被合并到 prettyPhoto 源中。

于 2009-11-03T22:20:05.817 回答
0

我完成了这个：

<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/

于 2015-04-15T16:49:21.283 回答