logo标签列表

Fancybox：iframe无法工作

jqueryfancybox
16

非常简单的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。FYI：这不仅发生在谷歌上，对我输入的每个单独的URL都是如此。我错过了什么？

2
这可能是个愚蠢的问题，但看起来你是从教程中复制粘贴的。那么，你是否实际上在本地拥有js和css文件呢？ - bobthyasian
这正是我所想的！ - raam86
你的控制台显示了什么？ - raam86
控制台什么也没说...它只是跳转到谷歌，没有抛出任何错误或警告。 - Matthias
你尝试过在“anchor”之后调用脚本吗？就像imjared的代码一样。 - bobthyasian
显示剩余2条评论
4个回答
41

我成功地将锚点上的 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。

从文档中可以看出，Odd脚本使用匹配元素的href或data-fancybox-href属性来获取内容位置，并确定要显示的内容类型。您可以通过添加类名（fancybox.image、fancybox.iframe等）或data-fancybox-type属性直接指定类型。使用title或data-fancybox-title属性来指定项目标题。 - imjared
这是一个 jsfiddle，您可以在此处查看其工作情况：http://jsfiddle.net/rJndu/3/embedded/result/ - imjared
你在这里最好的选择可能是下载示例，更改链接，然后只需将案例减少，同时确保它能正常工作。你能确认我的示例在jsfiddle链接上是否有效吗？ - imjared
2
你还在使用jQuery 1.4吗？当我使用那个版本时，它不起作用。当我使用最近的版本（1.8）时，它可以正常工作。 - imjared
好的，非常奇怪:D 就这样了。谢谢！ - Matthias
显示剩余2条评论
14

因为@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或更高版本）

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

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

in js:

$("#iframe").fancybox({
        'type' : 'iframe'
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接