2012-08-24 14 views
7

Ich habe eine Seite mit einem Iframe, die ein HTML-Dokument in sich hat. Ich muss auf die iframe-ID aus diesem untergeordneten Dokument zugreifen und habe kein Glück, mit jQuery daran zu kommen. Die wesentliche Struktur ist dies in meiner Seite:eines Dokuments Eltern iframe in jQuery Suchen

<div id="ContainingDiv"> 
    <iframe id="ContainingiFrame"> 
    <html> 
    <head></head> 
    <body> 
    </body> 
    </html> 
    </iframe> 
</div> 

In meiner Javascript Methode, die ich zu irgendetwas in den <body> Tags erhalten kann jQuery Selektoren, kann aber das iframe Element, um es um die Größe nicht abrufen. Ich habe ein paar Dinge ausprobiert, aber bin zwar kein Experte in jQuery DOM Navigation, insbesondere dort, wo iframes beteiligt sind (der iframe ist in der gleichen Domäne wie die beinhaltende Seite.) Gibt es eine Möglichkeit kann ich dies tun?

+0

Was machen Sie bedeutet durch das "iframe-Element", das iframe selbst mit einer ID von "ContainingiFrame" oder ein Element innerhalb des iframe. Was genau versuchen Sie, die Größe zu ändern? – adeneo

+0

adeneo, ich interessiere mich für den ContainingiFrame selbst. Ich hatte unten einige ausgezeichnete Antworten und wünschte, ich könnte sie alle akzeptieren. – larryq

Antwort

17

Keine Notwendigkeit für jQuery überhaupt. Um den Körper Objekt Ihrer Eltern zu erhalten, können Sie dies tun:

var parentBody = window.parent.document.body 

Wenn es auf der gleichen Domäne wie Ihr iframe ist, dass Sie den Code aus ausgeführt werden, sobald Sie das haben, können Sie normalen Javascript, dass verwenden Objekt:

window.parent.document.getElementById("ContainingiFrame").style.height = "400px"; 

oder mit jQuery:

$("#ContainingiFrame", parentBody).height("400"); 

Hier ist ein Artikel über einen iframe innerhalb des iframe mit Beispielcode Ändern der Größe: http://www.pither.com/articles/2010/11/12/resize-iframe-from-within

Und eine weitere Frage/Antwort auf eine iframe Ändern der Größe basierend auf seinen eigenen Inhalt: Resizing an iframe based on content

+0

Ich suche diese Informationen für mehr als 2 Stunden; funktioniert für meine Bemühungen – MiBol

1

Try this:

ein Element Resize innen iframe:

$('#ContainingiFrame', window.parent.document).find('#someDiv').css('height', '200px'); 

oder die Größe gerade die iframe:

$('#ContainingiFrame', window.parent.document).height('640'); 
0

Try this:

$("#ContainingiFrame").contents().find("#someDiv"); 
9

Um Zugang des Dokuments Eltern von Ihrem iframe Sie einen Parameter auf Ihre Selektoren hinzufügen können, ist Standarddokument, aber nichts hindert Sie daran, die Änderung der Kontext so window.parent.document:

$('#ContainingiFrame', window.parent.document).whatever(); 

Oder fügen Sie es vor Ihrem Selektor:

window.parent.$('#ContainingiFrame').whatever(); 
4

Wenn Sie haben keine Informationen über die iframe (wie eine Kennung mit abzufragen), dann wollen Sie die verwenden frameElement des Fensters wie folgt:

var iframe_tag_in_parent_window = window.frameElement; 

Jetzt haben Sie den iframe-Tag selbst und können damit direkt in JavaScript arbeiten.

Um jQuery anstelle von einfachen JavaScript verwenden möchten, verwenden Sie die folgenden Schritte aus:

var iframe_in_jquery = jQuery(window.frameElement, window.parent.document); 

Wir über den ersten Teil gerade gesprochen (window.frameElement). Der zweite Teil ist der Kontext, in dem jQuery das Element finden und umbrechen wird. Dies ist das übergeordnete Dokument unseres aktuellen Fensters.

Zum Beispiel, wenn Sie eine eindeutige ID in dem iframe Tag haben könnten Sie tun:

var iframe_in_jquery = jQuery(window.frameElement, window.parent.document), 
    id = iframe_in_jquery.attr("id"); 

Jetzt id sind die Kennung, wenn der iframe Ihr JavaScript-Code in läuft.


P.S. Wenn window.frameElement null oder undefiniert ist, befinden Sie sich nicht in einem iframe.

P.P.S Beachten Sie, dass Sie zum Ausführen von Code im übergeordneten Fenster möglicherweise die übergeordnete Instanz jQuery() verwenden müssen; Dies geschieht mit window.parent.jQuery(...). Dies gilt insbesondere, wenn Sie versuchen, ein Ereignis trigger()!

P.P.S. Stellen Sie sicher, window.frameElement und nicht nur frameElement zu verwenden ... einige Browser sind etwas defekt und sie werden nicht immer auf die richtigen Daten zugreifen können, wenn nicht vollständig qualifiziert (obwohl im Jahr 2016 das Problem behoben werden kann)

+1

Ya, FrameElement lässt uns wirklich das Rahmencontainerfenster erhalten, ohne ID oder etwas zu wissen. Nicht sicher, wann diese Eigenschaft gültig wurde, aber mdn sagt, dass sie in sehr frühen Browsern verwendet werden kann. – Eric