Actualizar dos frames con un solo enlace

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

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.

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

Johnny

23/8/2007
Cada vez que busco un tema puntual relacionado
con javascript, lo encuentro en "desarrolloweb".

El estilo directo de los articulos, me ayudan a
aplicar rapidamente lo descrito en los mismos.

Gracias.

the man

25/11/2009
thx u
Gracias amigo, me salvaste la vida. chido

Ricardo

31/5/2012
Error en este ejemplo
al pinchar en el enlace para cambiar los dos frames. Da este error "Este contenido no se puede mostrar en un marco"

Adriana

13/9/2016
duda
si este acuraliza dos frames al mismo tiempo, ¿hay alguna forma de hacer que tambien mande los metodos post junto con la actualizacion de los frames?