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>
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...