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="#" onclick="location.href='http://www.google.be/'; return false;">This goes to iframe</a>
</body>
</html>

Тем не менее, fancybox просто не будет работать... Ссылки на js файл и css верны. JQuery функционирует нормально. Но нажатие на ссылку действует как обычная ссылка. Т.е.: я перенаправляюсь в google.be. FYI: Это не только с Google, но и с каждым URL-адресом, который я там разместил. Что мне здесь не хватает?

Ответы

Ответ 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

Ответ 2

Как объяснение, потому что @imjared сказал:

Не знаю, почему это так, но это сработало для меня.

Поскольку вы пытаетесь открыть внешнюю страницу, логическим шагом является открытие fancybox в режиме iframe, однако fancybox не имеет средств знать, что он должен обернуть содержимое тегом iframe.

Есть три способа сказать fancybox:

1). Добавьте type: "iframe" в свой пользовательский script как: 

$('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 script может оценить любое из вышеперечисленных состояний, но вы должны выбрать хотя бы один из них, чтобы заставить его работать (вы могли бы использовать более одного или всего, и он будет работать, но он избыточен)

ПРИМЕЧАНИЕ: это допустимо только для fancybox v2.x + (... и требует jQuery v1.6 или новее)

BTW: из-за ограничений безопасности некоторые веб-сайты не могут быть открыты в iframe, например, в Google или Facebook. Вы всегда должны рассматривать ту же самую политику происхождения, работающую с iframes и ajax-контентом.

Ответ 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>

Ответ 4

Похоже, что междоменные ссылки не открываются. Я использовал localhost, и использование href="#" onclick="location.href='http://localhost/example/?page_id=7896'; return false;" работает только. Если я пишу href="#" onclick="location.href='http://google.com'; return false;", это не работает. Если вы можете проверить, разместив свой сайт в домене и используя href="#" onclick="location.href='http://example.com?page_id=7896'; return false;"

В html:

<a id="iframe" href="#" onclick="location.href='http://localhost/example/?page_id=7896'; return false;">Link</a>

в js:

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