Jquery et Ajax pour charger Dynamiquement IFrame

J'ai un script qui charge dynamiquement les iframes à l'intérieur d'une page web. Vous pouvez voir la démo ici: DÉMO

Je veux utiliser jquery pour réaliser un semblable rseult, mais avec un bel effet de glissement, et les liens externes qui charge l'iframe dans une autre div. En gros, j'ai 10 liens sur une page. Lorsque le lien est cliqué, je veux que la fenêtre iframe à charger dans le nouveau contenu et d'appliquer un effet de la transition. Quelqu'un sait-il de tous les plugins qui existent pour cela? Je ne suis pas assez expérimenté pour écrire un script à partir de zéro, de sorte que toute aide serait grandement appréciée!

OriginalL'auteur JCHASE11 | 2010-03-23

  1. 3

    Modifié en fonction des commentaires...

    Donne une page comme

    <input type="button" value="Load Frames" id="submit" name="submit" onclick="loadFrame()" />
<iframe class="frameToChange" link="http://www.apple.com" style="display: none" ></iframe>
<iframe class="frameToChange" link="http://www.google.com" style="display: none" ></iframe>

    Essayer quelque chose comme le ci-dessous

    function loadFrame() {
    var j$ = jQuery.noConflict();
    var frames = j$('.frameToChange');

    frames.each(function(index) {
        j$(this).slideDown('fast');
        j$(this).attr('src', j$(this).attr('link'));
    });
}
    cela ressemble beaucoup, mais comment pourrais-je spécifier individuels de 10 iframes URL? Wouldnt-il mieux de lui donner un attribut url (en HTML), et utiliser jquery pour charger l'url sous la forme d'une iframe?
    mis à jour en fonction de vos commentaires. Juste ajouter que de nombreux cadres iframe class="frameToChange" que vous en avez besoin
    Chris, semble bon, mais ce n'est pas tout à fait encore là. Vous pouvez voir votre code sur cette page de démonstration que j'ai créé: vitaminjdesign.com/iframe Quand on clique sur le bouton, rien ne se passe. Je pense que c'est parce que dans votre jquery, il ne marche pas à dire où à la charge de l'iframe. Je vais créer une div appelé #test que je veux l'iframe à la charge. Comment puis-je régler le code pour le charger dans le div?
    la console de firebug dit "loadPlayBook n'est pas défini" . lorsque le bouton est cliqué, il n'y a rien à raconter ce qu'il a à faire ensuite
    Désolé, je pensais que je l'ai corrigée à temps, veuillez le mettre à jour à partir de ci-dessus. La fonction appelée doit être loadFrame. Et vous avez seulement besoin de l'appeler une fois pour toute la page.

    OriginalL'auteur Christoph

  2. 2

    J'utilise la suite: 

    $('iframe').load(function() {
    $(this).animate({
        'height': this.contentWindow.document.body.scrollHeight + 'px'
    });
});

    OriginalL'auteur Sam

  3. 1

    Vous pouvez animer l'iframe à l'aide de jQuery ou vous pourriez animer le contenu de l'iframe.

    L'inconvénient de faire quelque chose avec les iframes, c'est qu'ils ne permettent pas le script dans le parent de communiquer avec le script qui s'exécute à l'intérieur de l'iframe. C'est ce qu'on appelle les restrictions de Domaine pour la protection contre les scripts malveillants à partir de différents domaines.

    Donc si vous avez l'intention d'animer le contenu de votre iframe, vous avez besoin pour mettre en œuvre l'animation en tant que partie de la page qui se charge à l'intérieur de l'iframe. Sinon pour animer l'iframe lui-même, jQuery a déjà de la base des fonctions d'animation qui sont décrits ici.

    à ce stade, l'animation est secondaire à la fonctionnalité. Idéal pour savent bien!
    Ce n'est pas nécessairement vrai, si à la fois le parent et l'iframe sont sur le même domaine, ils peuvent interagir les uns avec les autres. Aussi, si l'iFrame est en tirant dans le contenu d'un sous-domaine du site vous pouvez forcer le domaine pour être le même que le parent en faisant le document.domaine = 'mydomain.com" pour correspondre à la mère.
    bon point. L'iframe sera sur le même domaine (un sous-domaine) que la page statique, donc je vais être capable de l'animer!

    OriginalL'auteur Roman

  4. 0

    jQuery a une diapositive effet construit en elle. Vous pouvez être en mesure de réaliser ce que vous cherchez en utilisant deux des iframes (appelons anciens et nouveaux) et à l'aide de la diapositive effet de transition entre eux.

    OriginalL'auteur Justin Ethier