Acceso a variables y funciones de otras ventanas

  • Por
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>

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

Carlos

20/5/2004
He leido el artículo y la explicación es muy buena, pero tal vez seria conveniente una explicación de como poder asignarle a una variable del popup que abres el valor de una variable php, esque para los que no sabemos nada de Java, se hace un poco complicado combinar todo esto con php.

Anibal

30/5/2005
Alguien podria decirme por qué en el link que nos lleva a ver el ejemplo en funcionamiento Firefox no me bloquea la pop-up?

La cuestión es que si ejecuto la página en local con el código idéntico SI bloquea la pop-up. También lo hace si cuelgo la página en mi servidor y accedo a ella, por ejemplo, mediante un documento que hace href a dicha página.

Edgar Iván

19/9/2007
Hola.
he intentado hacer esto, pero la función no la creo directamente sobre la ventana , la enlazo desde un archivo <nombre>.js y no me funciona, el mozila me dice función desconocida.... ¿alguna idea ?

Marvin

14/8/2009
La verdad?
la verdad? me salvaron la vida mi economia i todo con esto jaja.. gracias! :)

william

25/11/2010
Muchas gracias
es la segunda vez que me saca de apuros tu articulo, muchas gracias, saludos desde peru

esbva

12/9/2013
No me queda claro si son 2 archivos !!!
Lo copie pero no me queda claro si este codigo va en un archivo html, o son 2 archivos, y cuales son sus nombres lo copie en una servidor xampp y no me corre,,, please ,,, ayuda !!!

Luis Angel

04/10/2014
Excelenteee!!!!
Oyeee esto es excelenteee aprendi una nueva forma de recargar o llamar metodos de la pagina padre desde la hija..... en verdad muchas gracias por tu articulo es perfecto y mejor aun saber como mandar llamar metodos desde otras paginas ;)

Andres

30/12/2016
popup
Ya probe el codigo y no me funciona, no se por qué, incluso copie el codigo y tampoco funciono

GAvo RodHe

05/5/2017
No funciona el ejemplo
Ejecuto el ejemplo en Firefox y no funciona.