15

Very simple test.html page:

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

Yet, fancybox just won't work... The references to the js file and css are correct. JQuery functions normally. But clicking the link acts just a normal link. Ie: I get redirect to google.be. FYI: It's not just with google, it's with every single URL I put there. What am I missing here?

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 说的解释一样：

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

由于您正在尝试打开外部页面，因此合乎逻辑的步骤是以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 或更高版本）

顺便说一句：由于安全限制，某些网站无法在google或facebookiframe中打开。您应该始终考虑使用 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 回答