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.
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.
| 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...