15

非常に単純な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にリダイレクトされます。参考までに：それはグーグルだけではなく、私がそこに置いたすべてのURLにあります。ここで何が欠けていますか？

4

4 に答える 4

41

アンカーのクラスをに変更することに成功しました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の最新バージョンに更新する必要もあります

于 2012-12-13T21:08:30.573 に答える
14

@imjaredが言ったのと同じように：

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

外部ページを開こうとしているので、論理的な手順はfancyboxをモードで開くことですが、fancyboxには、コンテンツをタグiframeでラップする必要があることを知る手段がありません。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つを選択する必要があります（複数または全部を使用しても機能しますが、冗長です）

注：これはfancybox v2.x +でのみ有効です（...およびjQuery v1.6以降が必要です）

ところで：セキュリティ上の制限のため、たとえばグーグルやフェイスブックiframeのように、いくつかのウェブサイトは開くことができません。iframeとajaxコンテンツで機能する同一生成元ポリシーを常に考慮する必要があります。

于 2012-12-13T22:34:02.077 に答える
3

これは@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>
于 2013-10-18T16:30:42.847 に答える
1

クロスドメインリンクが開いていないようです。私はローカルホストを使用していましたが、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'
});
于 2016-03-20T11:41:49.750 に答える