2012-08-24 16 views
7

Ho una pagina con un iframe che contiene un documento html. Ho bisogno di accedere all'ID dell'iframe da quel documento figlio e non sto avendo fortuna a trovarlo con jQuery. La struttura essenziale è questo all'interno la mia pagina:Recupero iframe padre di un documento in jQuery

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

Nel mio metodo Javascript posso arrivare a nulla nei <body> tag che utilizzano selettori di jQuery, ma non può recuperare l'elemento IFRAME per ridimensionarla. Ho provato alcune cose, ma non sono un esperto nella navigazione DOM jQuery, in particolare dove sono coinvolti iframe (l'iframe si trova nello stesso dominio della pagina contenente). C'è un modo per farlo?

+0

significa dall'elemento "iframe", l'iframe stesso con un ID di 'ContainingiFrame' o un elemento all'interno dell'iframe. Che cosa stai cercando di ridimensionare esattamente? – adeneo

+0

adeneo, sono interessato al ContainingiFrame stesso. Ho avuto alcune risposte eccellenti qui sotto e vorrei poterle accettare tutte. – larryq

risposta

17

Nessuna necessità di jQuery. Per ottenere l'oggetto corpo del genitore, si può fare questo:

var parentBody = window.parent.document.body 

Se è sullo stesso dominio iframe che si esegue il codice, una volta che avete che, è possibile utilizzare il normale javascript che oggetto:

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

o con jQuery:

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

Ecco un articolo sul ridimensionamento di iframe all'interno del iframe con codice di esempio: http://www.pither.com/articles/2010/11/12/resize-iframe-from-within

E, un relativo domanda/risposta sul ridimensionamento di iframe sulla base di essa la propria contenuti: Resizing an iframe based on content

+0

Sto cercando queste informazioni per più di 2 ore; funziona per i miei sforzi – MiBol

1

Prova questo:

Ridimensionare qualche elemento all'interno iframe:

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

O semplicemente ridimensionare la iframe:

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

Prova questa:

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

Per accesso ai documenti del genitore dal iframe è possibile aggiungere un parametro alla selettori, di default è documento, ma nulla vieta di cambiare il contesto window.parent.document in questo modo:

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

Oppure aggiungilo prima del selettore:

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

Se non si dispone di informazioni circa l'iframe (ad esempio un identificativo per interrogare con) poi si desidera utilizzare il frameElement della finestra come segue:

var iframe_tag_in_parent_window = window.frameElement; 

Ora avete i tag iframe stesso e può lavorare con essa direttamente in JavaScript.

Per utilizzare jQuery invece del semplice JavaScript, è possibile utilizzare il seguente:

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

Abbiamo appena parlato la prima parte (window.frameElement). La seconda parte è il contesto in cui jQuery troverà l'elemento e lo avvolgerà. Questo è il documento genitore della nostra finestra corrente.

Ad esempio, se si dispone di un ID univoco nel tag iframe si potrebbe fare:

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

Ora id è l'identificatore se il iframe il codice JavaScript viene eseguito in.


P.S. se window.frameElement è nullo o indefinito, non si è in uno iframe.

P.P.S si noti che per eseguire il codice nella finestra padre, potrebbe essere necessario utilizzare l'istanza gen di jQuery(); questo viene fatto usando window.parent.jQuery(...). Questo è particolarmente vero se si prova a trigger() un evento!

P.P.P.S. assicurati di utilizzare window.frameElement e non solo frameElement ... alcuni browser sono un po 'rotti e non saranno sempre in grado di accedere ai dati corretti se non completamente qualificati (anche se nel 2016 il problema potrebbe essere risolto?)

+1

Ya, frameElement ci consente davvero di ottenere la finestra del frame frame senza conoscere id o qualcosa del genere. Non sono sicuro quando questa proprietà è diventata valida, ma mdn dice che può essere usata nei browser molto precoci. – Eric

Problemi correlati