Ejemplo de control de frames mediante Javascript en el que, pulsando un solo enlace, se actualizan dos páginas distintas contenidas en dos frames.
Con lo que sabemos ya sobre el control de frames podemos realizar un ejemplo para afianzar los conocimientos. Se trata de un ejercicio muy sencillo para conseguir que, al pulsar un solo enlace, se actualice la página contenida en dos frames distintos.
Como un enlace sólo sirve para actualizar el contenido de un frame, necesitaremos ejecutar unas sentencias javascript que sí nos permitan actualizar dos frames a la vez.
Si no se entiende el objetivo perseguido en este ejemplo, podemos verlo en marcha en una página a parte.
Empecemos viendo la declaración de frames, que no tiene ninguna complicación pues es simplemente un código HTML que pudimos aprender a programar en los artículos dedicados a frames del manual de HTML.
<html>
<head>
<title>Ejemplo de frames numero 1</title>
</head>
<frameset rows="50%,*">
<frame name="frame1" src="pagina1.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="frame2" src="pagina2.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</html>
Ahora veamos el código del primero de los frames, que es el que tiene la función Javascript para controlar los frames.
<html>
<head>
<title>Pagina 1</title>
<script language="JavaScript">
function actualiza_2_frames(){
window.parent.frames[1].location="http://www.google.com"
window.location="http://www.yahoo.es"
}
</script>
</head>
<body bgcolor="#ff9999">
<br>
<br>
<a href="javascript:actualiza_2_frames()">Actualiza dos frames con un solo enlace</a>
</body>
</html>
Al pulsar el enlace se llama a una función, colocada en la cabecera de la página, por comodidad y para evitar tener que escribir varias sentencias en el atributo href del enlace.
La función, donde verdaderamente está el cogollo de este ejercicio, es extremadamente simple. La primera sentencia accede al frame colocado en segundo lugar (que tiene el índice 1) y actualiza su propiedad location, que es la URL de la página que se está visualizando. En este caso coloca la web de Google en dicho marco, aunque es indiferente lo que deseemos colocar y podríamos haber situado una dirección con un camino relativo al documento actual.
En la segunda sentencia accedemos directamente a la propiedad location del objeto window, porque deseamos actualizar el mismo frame donde está colocado el script. Podríamos haber utilizado una sentencia como la siguiente:
window.parent.frames[0].location=" http://www.yahoo.es "
Pero en este caso no es necesario acceder a la declaración de frames y luego al frame 0 porque, como decía, estamos ya en él.
Por último veamos el código del segundo frame, que no tiene nada de especial.
<html>
<head>
<title>Pagina 1</title>
</head>
<body bgcolor="#9999ff">
<br>
<br>
Este es el cuerpo del frame 2, que tiene índice 1 en el vector de frames
</body>
</html>
Se puede ver el ejemplo en marcha en una página a parte.
Como un enlace sólo sirve para actualizar el contenido de un frame, necesitaremos ejecutar unas sentencias javascript que sí nos permitan actualizar dos frames a la vez.
Si no se entiende el objetivo perseguido en este ejemplo, podemos verlo en marcha en una página a parte.
| Referencia: Para entender este ejercicio deberíamos conocer cómo se hace referencia con Javascript desde un frame a otro. |
Empecemos viendo la declaración de frames, que no tiene ninguna complicación pues es simplemente un código HTML que pudimos aprender a programar en los artículos dedicados a frames del manual de HTML.
<html>
<head>
<title>Ejemplo de frames numero 1</title>
</head>
<frameset rows="50%,*">
<frame name="frame1" src="pagina1.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="frame2" src="pagina2.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</html>
Ahora veamos el código del primero de los frames, que es el que tiene la función Javascript para controlar los frames.
<html>
<head>
<title>Pagina 1</title>
<script language="JavaScript">
function actualiza_2_frames(){
window.parent.frames[1].location="http://www.google.com"
window.location="http://www.yahoo.es"
}
</script>
</head>
<body bgcolor="#ff9999">
<br>
<br>
<a href="javascript:actualiza_2_frames()">Actualiza dos frames con un solo enlace</a>
</body>
</html>
Al pulsar el enlace se llama a una función, colocada en la cabecera de la página, por comodidad y para evitar tener que escribir varias sentencias en el atributo href del enlace.
La función, donde verdaderamente está el cogollo de este ejercicio, es extremadamente simple. La primera sentencia accede al frame colocado en segundo lugar (que tiene el índice 1) y actualiza su propiedad location, que es la URL de la página que se está visualizando. En este caso coloca la web de Google en dicho marco, aunque es indiferente lo que deseemos colocar y podríamos haber situado una dirección con un camino relativo al documento actual.
En la segunda sentencia accedemos directamente a la propiedad location del objeto window, porque deseamos actualizar el mismo frame donde está colocado el script. Podríamos haber utilizado una sentencia como la siguiente:
window.parent.frames[0].location=" http://www.yahoo.es "
Pero en este caso no es necesario acceder a la declaración de frames y luego al frame 0 porque, como decía, estamos ya en él.
Por último veamos el código del segundo frame, que no tiene nada de especial.
<html>
<head>
<title>Pagina 1</title>
</head>
<body bgcolor="#9999ff">
<br>
<br>
Este es el cuerpo del frame 2, que tiene índice 1 en el vector de frames
</body>
</html>
Se puede ver el ejemplo en marcha en una página a parte.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...