Acceso desde el popup a la ventana principal

  • Por
Aprendemos a acceder a las propiedades de una página desde una ventana secundaria que ha sido abierta en esa página, es decir, acceso desde el popup a la ventana principal que lo abrió.
También podemos acceder desde un popup a la ventana que lo abrió, para acceder a los métodos y propiedades de la ventana, o hacer lo que deseemos con Javascript.

Referencia: Este texto viene del manual de control de ventanas secundarias con Javascript

Para ello, en el popup hay una variable declarada que es opener. En realidad es una propiedad del objeto window del popup, que hace referencia al objeto window de la ventana "abridora" (opener).

Para ilustrar el funcionamiento de opener vamos a hacer un ejemplo que consiste en una página principal, que tiene un formulario donde, entre otros campos, debemos introducir un teléfono con su prefijo internacional. En caso de que no conozcamos los prefijos internacionales nos permite pulsar sobre un botón y mostrar una ayuda. La ayuda se ofrece a través de un popup que contiene la lista de los prefijos internacionales para que seleccionemos uno de ellos. En el momento que se selecciona se debe actualizar el formulario de la ventana padre y cerrar la ventana secundaria.

Vamos por partes. Lo primero que podemos ver es el ejemplo en funcionamiento para aclarar posibles dudas.

Ahora vamos a echar un vistazo a la página principal, que contiene el formulario donde se debe escribir el prefijo y el número. Al lado del campo de texto donde se coloca el prefijo hemos puesto un botón que sirve para mostrar el popup de ayuda. Al pulsar el botón llamamos a la función abreVentana() que será la encargada de abrir el popup con la lista de prefijos.

<html>
<head>
    <title>Formulario prefijos</title>
<script>
var miPopup
function abreVentana(){
    miPopup = window.open("prefijos.html","miwin","width=300,height=150,scrollbars=yes")
    miPopup.focus()
}
</script>
</head>
<body>

<form name=formul>
<table cellspacing="3" cellpadding="3" border="0">
<tr>
    <td align="center">Prefijo</td>
    <td align="center">Número</td>
</tr>
<tr>
    <td align="center">
       <input type=text name=prefijo value="+" size=3 maxlength=3>
       <input type="Button" value="?" onclick="abreVentana()">
    </td>
    <td align="center">
       <input type=text name=numero value="" size=10 maxlength=10>
    </td>
</tr>
</table>
</form>

</body>
</html>


La función abreVentana se tiene que entender perfectamente, ya que hemos hecho anteriormente una función similar. El resto de la página es un simple formulario HTML metido dentro de una tabla para que quede mejor maquetado.

Ahora veamos la página HTML del popup, que es la que utiliza la referencia opener a la ventana "abridora", para actualizar el campo del formulario donde hay que colocar el prefijo.

<html>
<head>
    <title>Prefijos internacionales</title>
<script>
function ponPrefijo(pref){
    opener.document.formul.prefijo.value = pref
    window.close()
}
</script>
</head>

<body>
<h1>Lista de prefijos internacionales</h1>
<form name=fprefijos>
España:
<input type="Button" value="+34" onclick="ponPrefijo('+34')">
<br>
Holanda:
<input type="Button" value="+31" onclick="ponPrefijo('+31')">
<br>
Gran Bretaña:
<input type="Button" value="+44" onclick="ponPrefijo('+44')">
<br>
Estados Unidos:
<input type="Button" value="+01" onclick="ponPrefijo('+01')">
<br>
Bélgica:
<input type="Button" value="+32" onclick="ponPrefijo('+32')">
<br>
Grecia:
<input type="Button" value="+30" onclick="ponPrefijo('+30')">
</form>

</body>
</html>


Tenemos un formulario con una serie de botones para seleccionar el prefijo. Todos llaman a la función ponPrefijo() pasándole el prefijo seleccionado.

La función ponPrefijo() debe poner en un campo del formulario de la ventana que abrió el popup el valor del prefijo que ha recibido por parámetro. Para ello accede a la propiedad opener del objeto window, para tener acceso a la ventana principal (abridora) y desde allí accede a su documento, al formulario y a la propiedad value del campo de texto donde hay que escribir el prefijo. Por último cierra el popup con el método close() del objeto window.

Esperamos que haya resultado fácil de entender y sirva para ilustrar el modo de acceso desde el popup a la ventana padre. Recordar que podéis ver en marcha el ejemplo en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Miguel Angel Alvarez

09/8/2005
Me acaban de preguntar si es correcto esto de window.opener, porque al utilizar esta función le sale al usuario el mensaje:

windows.opener has no propierties

Quería asegurar que window.opener es correcto.

El error típico es que estés intentando acceder al opener cuando esa ventana no tiene un opener.

Una ventana que has abierto tú mismo, haciendo clic en el icono del programa como cualquier otra aplicación, no tiene opener definido.

Las que sí tienen opener son las ventanas que se han abierto mediante javascript, siempre y cuando permanezca abierta la página abridora (desde la que se hizo el window.open).

Dubier Estrada

22/8/2005
Si quieres evitar este error podrias hacer lo siguiente:

function insertar(nombre)
{
if(opener && opener.document.form1.val)
{
opener.document.form1.val.value = "uno"; //aqui harias lo que necesites
}
}

observa que ademas se hace un "and" para confirmar que la ventana opener no ha cambiado, es decir puede que aun exista la ventana que abrio el pop-up pero puede que se haya cargado en ella otra pagina

milton

24/3/2006
acabo de probar con
parent.mifuncion()

y si la ejecuta dentro de la ventana hija asi que seria otra forma mas simnple de llamar a una funcion en la ventana padre desde la ventana hija

javier

21/6/2006
Como hago para cargar un select en el formulario padre desde el popup donde tengo unos checkbox?

Nash

22/10/2007
Como podria hacerse para que no solo cerrara la pagina hija sino que ademas se refrescase automaticamente la pagina madre?, yo tengo puesto en la funcion de la pagina hija esto:
opener.document.refresh()
window.close()
pero se queda clavado y nisiquiera la cierra, tambien he probado:
opener.document.refreshwindow()

PD: uso firefox para las pruebas

Adrian

21/1/2008
Excelente aporte..gracias.

jamsys

27/4/2009
Ventanas Secundarias
Solo queria agradecerles el gran trabajo que tienen, no tengo mucha experiencia pero he aprendido de ustedes bastante, a traves de los mensajes que recibo y sus contenidos como de los manuales, muchas gracias, he resuelto un pequeño problema que tenia con las ventanas secundarias...

Aldo

03/11/2009
Problemas con el regreso del valor a la pagina madre
Hola, tengo el siguiente problema.

En la ventana hija cargue un formulario en PHP que trae del servidor un catalogo de clientes.

Ala hora de ejecutar el script no realiza ninguna afectacion en el value de la ventana madre, Me percate de lo siguiente si el valor de la variable es numerica lo hace perfectamente, pero si el valor de la variable es alfanumerica o string no lo hace.

Como puedo solucionar tal cosa

Gracias... totales

manuel_gomez-354852

06/4/2010
Acceso desde el popup a la ventana principal
A mi tambien me pasa pasa lo mismo, si la variable es numerica me lo adminte pero si es alfabetica se queda colgado.

Por otro lado que pasa cuando quieres pasar mas campos.
Un saludo

gabriel

09/4/2010
errores
quiero que desde la pagina hija poder cambiar el atributo src de un iframe de la pagina padre el problema esuqe me me marca error con permission denied o access is denied creo que el problema esque son de dominos diferentes pero el metodo window.opener.close() si me funciona

carlos_cervantes_druan

09/4/2010
Necesito ayuda
oye me parecio estupendo el artículo pero yo tengo una duda, ahí tu regresas valores definidos de un boton pero y si yo lo quiero regresar pero en lugar del valor del boton que ya lo tienes predefinido, quisiera regresar toda una linea o row de un gridview, como sería la opción, me ayudarías en mucho si me lo pudieras contestar

muhas graxias

leofaher

27/6/2012
Ventana emergente borra informacion de formulario padre.
Hola, espero que alguien me pueda ayudar con esto. Tengo un formulario donde introduzco varios campos de informacion, en un campo de este formulario tengo un boton que esta al lado de una caja de texto y q abre una ventana emergente para escoger el cliente el cual llega a la caja de texto que mencione anteriormente. De igual forma tengo otro campo fecha donde abro una ventana para escoger una fecha que se escribe en la caja de texto correspondiente. Mi problema es que al abrir cualquiera de estas dos ventanas emergentes se me pierde la informacion que ya he escrito en el formulario. Por favor ayudenme con este problema, agradexco su atencion.

jonatan

14/2/2013
Cuando la ventana secundaria se encuentra en otro dominio
que pasa si tengo el html de la ventana secundaria en otro dominio? (distiinto de la ventana principal), ya que hice la prueba y el browser me arroja : "Unsafe JavaScript attempt to access frame with URL" Utilizo un iframe para cargar la ventana secundaria.
Muchas gracias

Elena

07/7/2014
Problema con el ejemplo
Hola:
He intentado hacer el ejemplo que indicas y al pinchar en el prefijo internacional no me carga el dato en el formulario de la página principal. ¿Alguna idea?
Un saludo,

José Luis

14/1/2015
Diferencias con showModalDialog
Estimados:

El fuente que estoy revisando (no lo creé yo) tiene una particularidad al momento de realizar la apertura del popup y es que lo hace con showModalDialog de javascript y supongo que por esa razón es que cuando intento invocar window.opener obtengo un error de tipo "no se obtener la propiedad document de una referencia nula o sin definir". Itentaré cambiar el ShowModalDialog por el window.open, cualquier cosa les comento.

matias

21/1/2016
problema al incertar en el formulario
estimado, me funcioan todo perfecto, pero no puedo incertar el valor en el fomulario, pasa que mi ventana emergente, es una pagina donde busco un dato, y esta dirige a otra pagina y ahi recibo el valor, como puedo incertar ese valor en el formulario?? saludos

Heiner

07/3/2016
Su publicación
Gracias por el instructivo, pero tengo una pregunta.
Resulta que hago un programa don de en la ventana Padre necesito colocar el nombre de un Tercero, al no saberlo despliego la segunda ventana donde tengo el sistema de busqueda para encontrar el Tercero. Pero si no existe, tengo un siguiente botón en esta ventana que lo llamo nuevo y despliega una segunda ventana popup donde creo el Tercero, intento que estos valores (nuevo tercero) me lleguen al formulario de la hoja padre pero no es posible que haga alguna acción.
Creo que es por que se ha abierto ya una segunda ventana y seguramente el pierde el historial.
Podría por favor indicarme si hay alguna forma para realizar esta labor ?
Gracias

pablo

16/11/2016
funciona en Firefox¡¡¡
probe el codigo y funciona perfectramente en Firefox (pero no en Chrome).

Si en lugar de utilizar la propiedad window.opener utilizo window.parent no me funciona ¿Alguien sabe por que?

anonimo

27/2/2017
no funciona en chrome solución
Hola, solo me funciona si meto la carpeta con las paginas en un servidor con xampp, quizá alguno le pase lo mismo.