web-dev-qa-db-ja.com

Fancybox：iframeが機能しません

非常に単純なtest.htmlページ：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>

    <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen"/>

    <script type="text/javascript">
        $(document).ready(function () {
            /* This is basic - uses default settings */

            $("a.iframe").fancybox();

        });
    </script>
</head>
<body>
<a class="iframe" href="http://www.google.be/">This goes to iframe</a>
</body>
</html>

それでも、fancyboxは機能しません... jsファイルとcssへの参照は正しいです。 JQueryは正常に機能します。ただし、リンクをクリックすると、通常のリンクが機能します。つまり、google.beにリダイレクトされます。参考：Googleだけでなく、そこに置いたすべてのURLにもあります。ここに何が欠けていますか？

jqueryfancybox
15
Matthias

アンカーのclassをfancybox fancybox.iframeに変更することに成功しました。

<a class="fancybox fancybox.iframe" href="http://www.google.be/">This goes to iframe</a>
<script type="text/javascript">
    $(document).ready(function() {

        $('a.fancybox').fancybox();

    });
</script>

なぜそうなのかは分かりませんが、私にとってはうまくいきました。

編集：jQueryの最新バージョンに更新する必要もあります

39
imjared

@imjaredが言ったので、ちょうど説明として：

なぜそうなのかは分かりませんが、私にとってはうまくいきました。

外部ページを開こうとしているので、論理的なステップはiframeモードでfancyboxを開くことですが、fancyboxにはiframeタグでコンテンツをラップする必要があることを知る手段がありません。

Fancyboxに指示する方法は3つあります。

1）。 type: "iframe"をカスタムスクリプトに次のように追加します。

$('a.fancybox').fancybox({
   type: "iframe"
});

2）。次のような属性data-fancybox-type="iframe"を<a>アンカータグに追加します。

<a class="iframe" href="http://www.google.be/" data-fancybox-type="iframe">This goes to iframe</a>

ただし、HTML5 DOCTYPEが必要です。

3）。受け入れられた回答のように、特別なクラスfancybox.iframeを<a>アンカータグに追加します。

Fancyboxスクリプトは上記の状態のいずれかを評価できますが、動作させるために少なくとも1つを選択する必要があります（1つ以上を使用することもできますが、動作しますが、冗長です）

[〜＃〜] note [〜＃〜]：これはfancybox v2.x +のみに有効です（...およびjQuery v1.6または後）

ところで：セキュリティの制限により、たとえばgoogleやfacebookのようなiframeで開くことができないウェブサイトもあります。常にSame Origin policyiframeおよびajaxコンテンツの操作を考慮する必要があります。

14
JFK

これは、@ JFKの指示のおかげでうまくいきました。

<!DOCTYPE HTML>
<html>
<head>
    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox -->
    <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
    <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <script type="text/javascript">
        $('a.fancybox').fancybox({
            type: "iframe"
        });
    </script>

</head>
<body>

<a class="fancybox" href="http://www.w3schools.com/" data-fancybox-type="iframe">This goes to iframe</a>

</body>
</html>
3
Ehsan

クロスドメインリンクが開いていないようです。 localhostを使用していましたが、href="http://localhost/example/?page_id=7896"を使用した場合のみ機能します。 href="http://google.com"と書いた場合、動作しません。サイトをドメインに配置してhref="http://example.com?page_id=7896"を使用して確認できる場合

HTMLで：

<a id="iframe" href="http://localhost/example/?page_id=7896">Link</a>

js：

$("#iframe").fancybox({
        'type' : 'iframe'
});
1
Aramis