Anzeige jquery pretty Leuchtkasten in iframe Mutter

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

  •  18-09-2019
  •  | 
  •  

Frage

Ich bin mit jquery pretty 2.5.3 und ich habe mich gefragt, wie ich die Lichtbox bekommen kann in dem übergeordneten Fenster eines iframe angezeigt werden, wenn ein Bild Link innerhalb des iframe ausgewählt wird?

Hier ist mein Code:

Seite im 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>

Wenn ich diese Seite selbst laden die Leuchtkasten funktioniert.

Iframe-Code: 

<html>
<head>
</head>

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

Allerdings, wenn ich die Seite mit dem iframe laden, und klicken Sie auf dem Bild Link in der Seite, die im iframe I ist die Leuchtkasten will in dem übergeordneten Fenster und nicht im iframe angezeigt werden soll.

War es hilfreich?

Lösung

Versuchen Sie, diese Wähler: $("#myid", top.document)

Der top.document erzählt die Wähler das myid Element Ziel der existiert in der obersten Dokument (Ihre Mutter Seite). Damit diese funktioniert, muss jQuery in der Datei geladen werden, die durch die betrachtet wird iframe.

Quelle: http://groups.google .com / Gruppe / jquery-en / browse_thread / thread / 5997ef4a60a123af? pli = 1

Bearbeiten

Ok der einzige Weg, dies funktionieren wird ist:

  1. Entfernen Sie den folgenden Code aus Ihrer realen Seite (inner.html, der in der iframe enthält): 

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

  2. Jetzt in Ihrer iframe Seite hinzufügen: 

    <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. Auch fügen Sie den folgenden JS-Code: 

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

Das sollte es tun, aber es wird dann für die iframe-Seite nur dann funktionieren, und nicht direkt aus der realen Seite.

Andere Tipps

fanden diese irgendwo

<base target="_parent" />

legt es in der Spitze der IFRAME

Ich löste das Problem mit dem iframe Kopien von Daten. Finden Sie in dem Script-Code auf Hauptseite: Hinweis: In meinem Code gibt ein Bild, das die Galerie beginnt und die Galerie nicht sichtbar ist, wird das Bild Id „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();
  });
});

Der iframe HTML-Code lautet: 

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

Und die div am unteren Rand der Seite, die die kopierten Daten empfängt: 

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

Ich habe Tests für FF und IE und laufen normal weiter.

Der Code ändert, dass ich gemacht waren:

  • Es wurde eine neue Wahr / Falsch-Einstellung in den Einstellungen, die auf der Leitung beginnen 18 d displayIframeContentsInParent: false,

  • Auf rund Linie 92 in den if(theGallery) wenn Block zu überprüfen, ob die neue Einstellung auf true gesetzt wurde, und wenn ja, suchen Sie die iframe Inhalte für weitere Bilder in der 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'));
   });
}

  • Auf rund Linie 125 in der offenen Funktion: im if($.browser.msie && $.browser.version == 6) wenn else-Block, fügen Sie den folgenden auch Kombinationsfelder in der iframe verstecken: 

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

  • Schließlich auf um die Linie 300 in der Nähe Funktion: im if($.browser.msie && $.browser.version == 6) wenn else-Block, fügen Sie folgende, um die Kombinationsfelder in der iframe wieder sichtbar zu machen: 

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

Natürlich, wenn Sie ziemlich Foto verwenden jetzt müssen Sie die neue Einstellung auf true setzen, damit es die iframe Inhalte für andere Bilder suchen d.h angezeigt werden soll. 

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

Ich habe einen Link auf diese Veränderungen im Support-Forum pretty so hoffentlich veröffentlicht, werden diese Änderungen in die Quelle aufgenommen pretty erhalten.

ich fertig mit diesem: 

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

Es sieht durch alle Iframes auf der Hauptseite. JQuery innerhalb Code des iframe ist nicht erforderlich.

Das ist alles über iFrame Inhalt geladen werden müssen, bevor Sie versuchen, darauf zuzugreifen:

http://grasshopperpebbles.com/ajax/using-jquery -zu-access-iframe-content /

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top