web-dev-qa-db-fra.com

Fancybox: iframe ne fonctionne pas

Très simple page 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>

Pourtant, fancybox ne fonctionnera tout simplement pas ... Les références au fichier js et css sont correctes. JQuery fonctionne normalement. Mais en cliquant sur le lien agit simplement un lien normal. C'est-à-dire que je suis redirigé vers google.be. FYI: Ce n'est pas seulement avec google, c'est avec chaque URL que j'ai mis là. Qu'est-ce que j'oublie ici?

jqueryfancybox
15
Matthias

J'ai eu du succès en changeant le class sur l'ancre en 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>

Aucune idée pourquoi c'est le cas mais cela a fonctionné pour moi. 

Edit : également besoin de mettre à jour une version récente de jQuery

39
imjared

Juste comme une explication parce que @imjared a dit:

Aucune idée pourquoi c'est le cas mais cela a fonctionné pour moi.

Puisque vous essayez d'ouvrir une page externe, l'étape logique consiste à ouvrir fancybox en mode iframe. Toutefois, fancybox n'a aucun moyen de savoir qu'il doit envelopper le contenu dans une balise iframe.

Il y a trois façons de dire à fancybox de le faire:

1). Ajoutez type: "iframe" à votre script personnalisé tel que: 

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

2) Ajoutez l'attribut data-fancybox-type="iframe" à votre balise d'ancrage <a> comme suit:

<a class="iframe" href="http://www.google.be/" data-fancybox-type="iframe">This goes to iframe</a>

Cependant, il nécessite HTML5 DOCTYPE.

3) Ajoutez la classe spéciale fancybox.iframe à votre balise d'ancrage <a> comme dans la réponse acceptée. 

Le script fancybox est capable d’évaluer n’importe lequel des états ci-dessus, mais vous devez en choisir au moins un pour le faire fonctionner (vous pouvez en utiliser plusieurs ou au total et cela fonctionnera, mais c’est redondant).

NOTE: ceci n'est valable que pour fancybox v2.x + (... et requiert jQuery v1.6 ou version ultérieure)

BTW: En raison de restrictions de sécurité, certains sites Web ne peuvent pas être ouverts dans une iframe, comme par exemple Google ou Facebook. Vous devez toujours considérer la règle Même origine avec les iframes et le contenu ajax.

13
JFK

Cela a fonctionné pour moi grâce aux instructions de @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>
3
Ehsan

On dirait que les liens interdomaines ne s'ouvrent pas. J'utilisais localhost, et href="http://localhost/example/?page_id=7896" ne fonctionne que. Si j'écris href="http://google.com" cela ne fonctionne pas. Si vous pouvez vérifier en mettant votre site sur un domaine et utilisez href="http://example.com?page_id=7896"

En html:

<a id="iframe" href="http://localhost/example/?page_id=7896">Link</a>

en js:

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