Question

非常简单的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。仅供参考：这不仅仅是谷歌，而是我放在那里的每一个网址。我在这里缺少什么？

Answer 1

我成功将锚点上的类更改为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

Answer 2

正如解释因为@imjared说：

不知道为什么会这样，但它对我有用。

由于您尝试打开外部页面，因此逻辑步骤是以iframe模式打开fancybox，但是fancybox无法知道它必须将内容包装在iframe标记中

有三种方法可以告诉fancybox这样做：

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脚本能够评估上述任何状态，但你应该至少选择其中一个以使其工作（你可以使用多个或完全使用它可以工作，但它是多余的）

注意：这仅适用于fancybox v2.x +（...并且需要jQuery v1.6或更高版本）

BTW：由于安全限制，某些网站无法在iframe中打开，例如 google 或 facebook 。您应始终考虑 Same origin policy 使用iframe和ajax内容。

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

Answer 4

似乎跨域链接无法打开。我使用的是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'
});

Fancybox：iframe不起作用

4 个答案: