2012-05-25 25 views
18

¿hay alguna manera de acceder desde la página iframe a parrent (y cambiar la página parrent)?acceda y cambie la página padre de iframe (con jquery)

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

En frame1.html es <a href=..> y quiero añadir texto "<h1>clicked</h1>" en <div id="test1"></div>, cuando se hace clic en el <a href..>.

Gracias.

+0

Por muchas razones de seguridad esto no es posible. –

+1

@ChristianVarga no es del todo cierto: está permitido en los elementos que residen en el mismo dominio. – Christoph

+1

Impresionante, me corrigen. –

Respuesta

20

Si su página secundaria (frame1.html) se encuentra en el mismo dominio que la página principal, se puede escribir un código como a continuación en la ventana secundaria:

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

El segundo parámetro proporciona la context en cuál buscar el elemento emparejado por el primer parámetro. El documento está aquí: http://api.jquery.com/jQuery/#jQuery-selector-context

jQuery(selector [, context ]) 

Por lo tanto, su código (frame1.html) podría ir así:

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

Espero que esto ayude.

7

Nota importante: Acceso de entrada y salida iframes sólo es posible, si ambos, padre e iframe son del mismo dominio, de lo contrario usted no tiene acceso debido a la política del mismo origen .

Tenga en cuenta que ambas partes tienen su propio documento. Acceso al objeto padre de marco flotante es muy sencillo con

parent.document 

y de los padres es uno de los siguientes: (cuidado con el apoyo)

window.frames['iframeName'] 

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

o referencia a él con id y hacer lo siguiente

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

El siguiente código debería funcionar bien:

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

El selector proviene del documento principal para realizar alguna acción. Por ejemplo:

$(parent.document).find("#selector").remove(); 
Cuestiones relacionadas