web-dev-qa-db-ja.com

iframeから親のFancyboxを呼び出す

Index.htmlとsocial.htmlの2つのページがあります。インデックスをクリーンアップし、必要なjqueryコードのみを残しました fancybox 私がやろうとしているのは、social.html内に画像を配置することです。クリックすると、fancyboxが開いて表示されますが、 index.htmlがiframe内にありません。発生するエラーは次のとおりです。

Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
  onclick

これは私のindex.htmlです：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
        function showImage(image) {
            $.fancybox('<img src="img/' + image + '" alt="" border="0" />');
        };
</script>

</head>

<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>

iFrameページ：

 <img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>

PS：両方のページが同じドメインにあります...編集：video.js->これはfancyboxからのものです私はこれを作成しませんでした。

jQuery(document).ready(function() {

    $(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : 640,
            'height'        : 385,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
            }
        });

        return false;
    });



});
jqueryhtmliframefancybox
10
Andres

まず、fancybox v2.xを使用してシームレスに実行する必要があります（fancybox v1.3.xにパッチを適用することは努力の価値がありません）

次に、fancyboxを適切に超越するために、親ページとiframedページの両方のページに、jqueryとfancyboxのcssファイルとjsファイルをロードする必要があります。

したがって、両方のページに、少なくとも次のようなものが必要です。

<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />

そして

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>

次に、iframed（子）ページでは、スクリプトは基本的に同じです（ただし、v2.xの適切なfancyboxオプションがあります... ここのドキュメントを確認してください ）

$(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            // more options (v2.x) etc

しかしこれの代わりに

        $.fancybox({

これを行う：

        parent.$.fancybox({

次に、fancyboxは、iframeページの境界外の親ページに表示されます

[〜＃〜] update [〜＃〜]： デモページはこちら

20
JFK

Imgはiframe上にあるため、別のWebページになります。したがって、Jqueryはindex.htmlにありますが、imgはありません。そのため、JQueryは画像にアクセスできません。

多分このようなものを使用しています...しかし、私はそれがうまくいくとは思わない

Index.htmlスクリプト部分について

$(document).ready(function () {
    //function to active fancybox on the thumbs class inside the iframe
    //Not sure it works on iframes, probably it doesnt.
    $("#iframeID.thumbs").fancybox();
});

そして、iframe宣言にIDを追加します<iframe src =\"social.html \" id = "iframeID"など...残りのプロパティ>

しかし、私のアドバイスは、iframeの代わりにdivを使用することです。また、目立たないJavascriptの場合は、画像からonclickを削除する必要があります。

チュートリアルを確認してください： http://fancybox.net/howto スペイン語で同様のチュートリアルが必要な場合は、私のサイトも確認できます。

1
H27studio

私は以前にこの問題に遭遇し、解決策を見つけることができました。これがivが行ったことです。私のiframeページで、hrefを使用して親ウィンドウを呼び出しました。 onClick="callMe('www.google.com')"またはpics "/images/pics.png"の場合、親ページでこのスクリプトを呼び出します

<script type="text/javascript"> 
 function callMe(site){ 
      $(".sample").fancybox({ 
         'width' : '97%', 
         'height' : '97%', 
         'href' : ''+site+'' //force href to change its site from the call function in the iframe page 
      }); 
      readyFancy() call to trigger the decoy link page 
 } 

 function readyFancy(){ 
      $("a.sample").trigger("click"); 
 } 
 </script>

私の親のhtmlでは、おとりのリンクを修正しています（これはload fancyboxの例からのものです）

<body> 
<a href="#" class="sample"></a> 
</body>

ここから実用的な例をダウンロードできます。 https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

1
drexsien