2012-05-25 16 views
18

c'è un modo come accedere da iframe a pagina di parrent (e cambiare pagina di parrent)?accedi e cambia pagina padre da iframe (con jquery)

<body> 
    <iframe src="frame1.html" name="frame1" height="100%"></iframe> 
    <div id="test1"></div> 
</body> 

In frame1.html è <a href=..> e voglio aggiungere del testo "<h1>clicked</h1>" in <div id="test1"></div>, quando il <a href..> stato cliccato.

Grazie.

+0

Per molti motivi di sicurezza questo non è possibile. –

+1

@ChristianVarga non completamente vero: è consentito su tutti gli elementi che risiedono nello stesso dominio. – Christoph

+1

Fantastico, sono corretto. –

risposta

20

Se la pagina figlio (frame1.html) si trova nello stesso dominio della pagina genitore, è possibile scrivere un codice come di seguito nella finestra secondaria:

$('#test1', parent.document).html('<h1>clicked</h1>'); 

Il secondo parametro fornisce la context in quale cercare l'elemento corrispondente al primo parametro. Il Documento è qui: http://api.jquery.com/jQuery/#jQuery-selector-context

jQuery(selector [, context ]) 

Quindi, il codice (frame1.html) potrebbe andare in questo modo:

<a href="..." 
    onclick="$('#test1', parent.document).html('<h1>clicked</h1>');">click me</a> 

Spero che questo aiuti.

7

Nota importante: accesso dentro e fuori iframe è possibile solo, se entrambi, genitore e iframe sono dallo stesso dominio, altrimenti non si ha accesso a causa di Same Origin Policy.

Nota che entrambe le parti hanno il proprio documento. Accesso all'oggetto padre da iframe è semplice con

parent.document 

e dai genitori è uno dei seguenti: (! Guardare fuori per il supporto)

window.frames['iframeName'] 

(window.frames.length /*gives you the number of iframes in your document*/) 

o farvi riferimento con id e procedere come segue

var iframe = document.getElementById('iframe'); 
var doc = iframe.contentDocument? iframe.contentDocument:iframe.contentWindow.document; 
2

Il seguente codice dovrebbe funzionare bene:

$(parent.document).find("#selector"); 

Il selettore proviene dal documento principale per eseguire alcune azioni. Per esempio:

$(parent.document).find("#selector").remove(); 
Problemi correlati