jquery prettyPhoto ライトボックスを iframe 親に表示する

StackOverflow https://stackoverflow.com/questions/1483227

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

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

iframe コード:

<html>
<head>
</head>

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

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

役に立ちましたか？

解決

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

Top.Documentは、最上部のドキュメント（親ページ）に存在するMyID要素をターゲットにするようにセレクターに指示します。これが機能するためには、jQueryをiframeを介して表示されるファイルにロードする必要があります。

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

編集

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

  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 ページに対してのみ機能します。

他のヒント

が見つかり、このどこかに

<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) if ブロックは、新しい設定が 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) else ブロックの場合は、以下を追加して iframe 内のコンボ ボックスも非表示にします。

    if(settings.displayIframeContentsInParent)
{
    $("iframe").contents().find('select').css('visibility','hidden');
}

  • 最後に、close 関数の 300 行目あたりで次のようになります。の中に if($.browser.msie && $.browser.version == 6) else ブロックの場合は、次のコードを追加して、iframe 内のコンボ ボックスを再び表示できるようにします。

    if(settings.displayIframeContentsInParent)
{ 
  $("iframe").contents().find('select').css('visibility','visible');
}

もちろん、現在 Pretty Photo を使用する場合は、表示する他の画像を iframe コンテンツで検索するように、新しい設定を true に設定する必要があります。

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

これらの変更へのリンクを prettyPhoto サポート フォーラムに投稿したので、これらの変更が prettyPhoto ソースに組み込まれることを願っています。

私はこれで終了します：

<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-アクセスはiframeコンテンツ/ の

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top