2011-08-11 19 views
49

Tengo una página que podemos llamar parent.php. En esta página tengo un iframe con un formulario de envío y, además, tengo un div con el id "objetivo". ¿Es posible enviar el formulario en el iframe y cuando sea exitoso actualizar el div de destino? Digamos cargar una página nueva o algo así?Elementos de acceso de la ventana padre de iframe

Edit: El div de destino está en la página padre, por lo que mi pregunta es básica si puede hacer un ejemplo de una llamada jquery fuera del iframe al padre. ¿Y cómo se vería eso?

Edit 2: Así es como se ve mi código jquery ahora. Está en la página de iframe. la #target div está en el parent.php

$(;"form[name=my_form]").submit(function(e){  
e.preventDefault; 
window.parent.document.getElementById('#target'); 
$("#target").load("mypage.php", function() { 
$('form[name=my_form]').submit(); 
}); 
}) 

I no sabe si el guión es causa activa el formulario envía succcessfully pero no pasa nada para apuntar.

Datos 3:

Ahora estoy tratando de llamar a la página principal de un enlace dentro del marco flotante. Y sin éxito allí tampoco

<a href="javascript:window.parent.getElementById('#target').load('mypage.php');">Link</a> 
+0

el objetivo está en la página principal o iframe? – ShankarSangoli

+0

está en la página padre, por lo que mi pregunta es básica si puede hacer para un ejemplo una llamada jquery fuera del iframe al padre. – Paparappa

Respuesta

97

creo que el problema puede ser que usted no está encontrando su elemento debido a la "#" en su llamada a conseguirlo:

window.parent.document.getElementById('#target'); 

Sólo es necesario el # si está utilizando jQuery. Aquí debe ser:

window.parent.document.getElementById('target'); 
+6

¿Qué sucede si el contenedor del sitio web y el iframe están en dominios diferentes? –

+1

@Michelem Creo que no tienes suerte; Para que tengas acceso al padre, el iframe necesita tener el mismo protocolo y dominio del padre. Eso es una salvaguarda para evitar scripts de dominio cruzado. –

+1

@Michelem: la única forma de comunicarse con el padre si el iframe y el padre están en dominios diferentes, está usando window.postMessage(). Sin embargo, eso es posible solo si tienes control sobre ambos extremos. Documentación aquí: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage –

8

Haga que el js siguientes dentro del marco flotante y el uso de AJAX para enviar el formulario.

$(function(){ 

    $("form").submit(e){ 
     e.preventDefault(); 

     //Use ajax to submit the form 
     $.ajax({ 
      url: this.action, 
      data: $(this).serialize(), 
      success: function(){ 
      window.parent.$("#target").load("urlOfThePageToLoad"); 
      }); 
     }); 

    }); 

}); 
+0

Funciona para enviar el formulario a través de ajax, pero el div de destino permanece como está desde el principio. Parece que no funciona para comunicarse con parent.php desde dentro del iframe. – Paparappa

+0

Si el iframe está en el mismo dominio, entonces no tendrá ningún problema. ¿Puedes intentar alertar a 'window.parent. $ (" # Target ").length' en el controlador de éxito. – ShankarSangoli

+0

el iframe está en el mismo dominio. Bueno, puse ese código en lugar de window.parent. $ ("# Target"). Load ("urlOfThePageToLoad"); pero no devolvió nada. Donde se encuentra "forma" en su código, ¿se supone que es el nombre de la forma? ¿Podría ser eso? – Paparappa

4

Creo que puedes usar window.parent del iframe. window.parent devuelve el objeto window de la página principal, por lo que podría hacer algo como:

window.parent.document.getElementById('yourdiv'); 

Luego hacer lo que quiera con ese div.

+0

Soy un jquery novato pero ¿debería poner algo así en el archivo ifram? – Paparappa

+0

$ (document) ready (function() {\t \t \t \t window.parent.document.getElementById ('# target'); \t \t $ ("# diana") carga ("archivo.php");. }); – Paparappa

+0

Probablemente más como: $ (document) .ready (function() {$ (window.parent.document.getElementById ("target")). Load ("file.php")); }); – varfoo

5

Se puede acceder a los elementos de ventana padre desde dentro de un iframe utilizando window.parent así:

// using jquery  
window.parent.$("#element_id"); 

¿Qué es la misma que:

// pure javascript 
window.parent.document.getElementById("element_id"); 

Y si tiene más de un iframes anidado y desea acceder al iframe superior, entonces puede usar window.top de esta manera:

// using jquery 
window.top.$("#element_id"); 

¿Qué es la misma que:

div
// pure javascript 
window.top.document.getElementById("element_id"); 
Cuestiones relacionadas