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>

このページを単独で読み込むと、ライトボックスは正常に機能します。

iframe コード:

<html>
<head>
</head>

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

ただし、iframe を使用してページをロードし、iframe にあるページの画像リンクをクリックすると、ライトボックスが iframe ではなく親ウィンドウに表示されます。

4

5 に答える 5

2

このセレクターを試してください:$("#myid", top.document)

top.document は、最上位のドキュメント (親ページ) に存在する myid 要素をターゲットにするようにセレクターに指示します。これを機能させるには、iframe を介して表示されるファイルに jQuery をロードする必要があります。

ソース: http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1

編集

これが機能する唯一の方法は次のとおりです。

  1. 次のコードを実際のページ (iframe に含まれる inner.html) から削除します。

    <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 行目から始まる設定に新しい true/false 設定を追加しましたdisplayIframeContentsInParent: false。

  • if ブロックの 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'));
   });
}

  • 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 に答える