> Manuales > Control de ventanas secundarias, popups, con Javascript

Cómo tener acceso a variables y funciones que estén en otra ventana.

Desde una ventana también tenemos acceso a las variables y funciones que hayamos declarado en otras ventanas. Gracias a esto, desde un popup podemos controlar el estado de las variables de la página principal y llamar a funciones para hacer cualquier cosa que necesitemos.

El acceso a las variables y las funciones se realiza a través de los objetos ventana. Por ejemplo, si deseamos desde una ventana tener acceso a una función de un popup colocaríamos su objeto ventana seguido de un punto y el nombre de la función a la que queramos acceder, como si fuese un método nuevo del objeto ventana. Las variables se acceden como si fueran propiedades del objeto ventana. El código sería algo parecido a esto.

Para acceder a una variable

miPopup.miVariable

Para acceder a una función

miPopup.miFunción()

Vamos a ver un ejemplo para ilustrarlo. Tenemos una página con un número cualquiera de campos de texto en un formulario y una función que sirve para inicializar los datos de los campos de texto a 0. En esta página abriremos una ventana secundaria desde la cual invocaremos a la función que inicializa los campos de texto.

El ejemplo puede verse en funcionamiento aquí.

La página principal tendrá una parte con un script para definir la función y abrir el popup y otra parte con el formulario que contiene los campos de texto. Se puede ver a continuación su código.

<html>
<head>
<title>Inicializador de formularios</title>
<script>
function inicializaCampos(){
for (i=0;i<document.forms[0].elements.length;i++)
document.forms[0].elements[i].value = "0"
}
var miPopup
miPopup =
window.open("llamadas-desde-ventanas-popup.html","miventana","width=308,heig
ht=70,menubar=no")
</script>
</head>

<body>
<form>
<input type="Text" name="t1" value="0" size="4" maxlength="100">
<input type="Text" name="t2" value="0" size="4" maxlength="100">
<input type="Text" name="t3" value="0" size="4" maxlength="100">
<input type="Text" name="t4" value="0" size="4" maxlength="100">
<input type="Text" name="t5" value="0" size="4" maxlength="100">
<input type="Text" name="t6" value="0" size="4" maxlength="100">
<input type="Text" name="t7" value="0" size="4" maxlength="100">
</form>
</body>
</html>


En el popup podremos encontrar el código necesario para invocar a la función inicializaCampos() que pertenece a la ventana principal. La llamada a la función de la ventana "abridora" se realiza al pulsar un botón.

<html>
<head>
<title>Popup Inicializador de formularios</title> <script>
function llamadaOtraVentana(){
//llamada a la función de ventana abridora
window.opener.inicializaCampos()
window.opener.focus()
}
</script>
</head>

<body>
<form>
<input type="button" value="Llamar a función de otra ventana"
onclick="llamadaOtraVentana()">
</form>
</body>
</html>

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual