affichage jquery prettyPhoto dans la visionneuse parent iframe

StackOverflow https://stackoverflow.com/questions/1483227

  •  18-09-2019
  •  | 
  •  

Question

J'utilise jquery prettyPhoto 2.5.3 et je me demandais comment je peux obtenir la boîte de lumière pour afficher dans la fenêtre parent d'un iframe quand un lien d'image à l'intérieur de l'iframe est sélectionné?

Voici mon code:

Page dans le iframe: 

<html>
<head>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>

<body>
    <a href="animage.jpg" rel="prettyPhoto">
                <img src="animage.jpg" height="200" width="200"/>
    </a>
            <script type="text/javascript" charset="utf-8">
              $(document).ready(function(){
                 $("a[rel^='prettyPhoto']").prettyPhoto();
              });
    </script>
</body>

Quand je charge cette page sur son propre la visionneuse fonctionne très bien.

code iframe: 

<html>
<head>
</head>

<body>
    <iframe src="inner.html"/>
</body>
</html>

Cependant, quand je charge la page avec l'iframe et cliquez sur le lien d'image dans la page qui est dans l'iframe je veux la visionneuse pour afficher dans la fenêtre parent et non dans le iframe.

Était-ce utile?

La solution

Essayez ce sélecteur: $("#myid", top.document)

Le top.document dit sélecteur pour cibler l'élément de myid qui existe dans le document le plus élevé (votre page parent). Pour que cela au travail, jQuery doit être chargé dans le fichier qui est considéré par la iframe.

Source: http://groups.google .com / groupe / jquery-fr / browse_thread / fil / 5997ef4a60a123af? PLI = 1

modifier

Ok la seule façon dont cela fonctionne est:

  1. Supprimer le code suivant à partir de votre page réelle (inner.html, celle contenue dans l'iframe): 

    <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
         $("a[rel^='prettyPhoto']").prettyPhoto();
      });

  2. Dans votre page iframe, ajouter: 

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

  3. Ajoutez également le code JS suivant: 

    $(function() {
    $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } );
});

Cela devrait faire l'affaire, mais il faudra alors travailler seulement pour la page iframe, et non directement à partir de la page réelle.

Autres conseils

trouvé cela quelque part

<base target="_parent" />

le mettre dans la tête de IFRAME

J'ai résolu le problème avec l'iframe en utilisant des copies des données. Voir le code de script à la page principale: Remarque: Dans mon code il y a une image qui commence la galerie et la galerie est pas visible, l'image Id est « btngaleria ». 

$("#iPrincipal").load(function(){
  $("#iPrincipal").contents().find("#btngaleria").click(function() { 
    var temp=$("#iPrincipal").contents().find("#galeria").html();
    $("#galeria").html(temp);
    $("#galeria:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',slideshow:4000, autoplay_slideshow: true});
    $("#galeria li:first a").click();
  });
});

Le code iframe HTML est: 

<iframe src="home.asp" name="iPrincipal" id="iPrincipal" frameborder="0" width="100%" height="540"></iframe>

Et la div au bas de la page qui reçoit les données copiées: 

<div id="falso" style="display:none; visibility:hidden"><ul id="galeria" class=""></ul></div>

J'ai fait des tests pour FF et IE et fonctionner normalement.

Le code change que je fait étaient les suivantes:

  • Ajout d'un nouveau paramètre true / false dans les paramètres qui commencent sur la ligne 18. à savoir displayIframeContentsInParent: false,

  • autour de la ligne 92 dans la if(theGallery) si la vérification de bloc si le nouveau paramètre a été défini sur true et si oui, rechercher le contenu iframe pour plus d'images dans la galerie: 

    if(settings.displayIframeContentsInParent)
{
   $("iframe").contents().find('a[rel*='+theGallery+']').each(function(i) {
      if($(this)[0] === $(link)[0]) setPosition = i;
 images.push($(this).attr('href'));
 titles.push($(this).find('img').attr('alt'));
 descriptions.push($(this).attr('title'));
   });
}

  • En ligne autour de 125 dans la fonction ouverte: dans le if($.browser.msie && $.browser.version == 6) si le bloc d'autre, ajoutez ce qui suit pour cacher également des boîtes combo dans le iframe: 

    if(settings.displayIframeContentsInParent)
{
    $("iframe").contents().find('select').css('visibility','hidden');
}

  • Enfin autour de la ligne 300 dans la fonction proche: dans le if($.browser.msie && $.browser.version == 6) si le bloc d'autre, ajoutez ce qui suit pour rendre les zones de liste déroulante dans le iframe nouveau visible: 

    if(settings.displayIframeContentsInParent)
{ 
  $("iframe").contents().find('select').css('visibility','visible');
}

Bien sûr, lorsque vous utilisez photo assez maintenant, vous devez définir le nouveau paramètre true afin qu'il recherche le contenu iframe pour d'autres images à afficher i.e.. 

$("a[rel='prettyphoto']").each(function() {
  $(this).prettyPhoto(displayIframeContentsInParent: true);
});

Je l'ai posté un lien vers ces changements dans le forum de soutien prettyPhoto si tout va bien, ces changements seront intégrés à la source prettyPhoto.

J'ai fini avec ceci: 

<script type="text/javascript">
    $('iframe').load(function(){
    $(this).contents().find("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Il regarde à travers tous les iframes sur la page principale. JQuery à l'intérieur du code iframe n'est pas nécessaire.

C'est tout au sujet du contenu de iFrame doit être chargé avant d'essayer d'y accéder:

http://grasshopperpebbles.com/ajax/using-jquery -À-accès iframe-content /

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top