Navegador desplegable con frames

  • Por
Es la continuación de la ayuda técnica para crear un menú desplegable. En este caso se realiza una adaptación del script para que pueda ser utilizado en un sitio diseñado con frames
Este es un reportaje que se tiene que leer a continuación del reportaje Cómo hacer un navegador desplegable, publicado en desarrolloweb.com. En ese reportaje enseñábamos a crear un navegador desplegable con un elemento SELECT de un formulario.

Muchos visitantes han utilizado ya el script con éxito, pero algunos han escrito con una duda para su utilización en una página realizada con frames. La duda consiste en el navegador solo nos actualiza el frame en el que está, y lo interesante para ellos sería que actualizase un frame distinto. Es un problema muy lógico dado que a menudo se coloca el navegador de modo que esté siempre visible, en un frame donde tenemos los controles de navegación y el área que deseamos que se actualice es la correspondiente al frame principal.

Cambios en el script

El único sitio donde vamos a tener que hacer cambios es en el script que contiene la función a la que llamamos destino(). Hay que adaptar esa función para que podamos cambiar la página de un frame distinto al que estamos.

En nuestro anterior ejemplo hacíamos window.location = url para cambiar el contenido del frame donde estaba el navegador. Ahora debemos cambiar el window.location de un frame distinto a este y para acceder a location de un frame distinto se consigue a través de esta encadenación de objetos:

window.parent.frames[].window.location

frames[] es un vector de frames donde el primer frame del FRAMESET sería frames[0], el segundo sería frames[1] y así sucesivamente. Por si no ha quedado claro, veamos con un ejemplo.

Tenemos este FRAMESET

<frameset rows="*,40">
<frame name="principal" src="index.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="no">
<frame name="menudesplegable" src="despleg.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="no">
</frameset>


En el segundo frame tenemos el la página que contiene menú desplegable. Como es el segundo frame accederíamos a su location de esta manera:

window.parent.frames[1].window.location = url

El script entero quedaría así:

<script language=javascript>
function destino(){
     url = document.navegador.secciones.options[document.navegador.secciones.selectedIndex].value
     if (url != "no") window.parent.frames[0].window.location = url;
}
</script>


Eso es todo, ya no hace falta cambiar más cosas para cumplir nuestros objetivos.

Si quieres, puedes descargarte un ejemplo de esta ayuda funcionando. .zipdesplegableconframes.zip 2Kb

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

antonio

09/3/2004
hola, me bajé el zip del navegador desplegable con frames, y tengo un
problema, es el siguiente:
funciona perfecto hasta que si desde el frame abierto hay un
hipervinculo a otro sitio u otra pagina , entoces es cuando si quiero
usar denuevo el menu, no acepta y da error como si no supiera donde
está el navegador.
Podrin ayudarme, ya que esto es precisamente lo que necesito.
Gracias de antemano y un saludo

Omar L

12/3/2004
El archivo de ejemplo de navegador desplegable con frames no funciona.

Slolo eso

Txema

23/7/2004
El script es fantástico, sin embargo creo que tiene algún fallo puesto que da error cuando el frame a actualizar consiste en una dirección web.

La primera vez carga bien pero no así las sucesivas veces que hacemos uso de las opciones del menu-navegador.

Aquí está vuestro ejemplo con el problema en cuestión:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>

<body>

<script language=javascript>
function destino(){
url = document.navegador.secciones.options[document.navegador.secciones.selectedIndex].value
if (url != "no") window.parent.frames[2].window.location = url;
}
</script>

<form name=navegador>
<select name="secciones" onchange="destino()">
<option value="no">Secciones varias
<option value="no">--------------------------------------
<option value="index.html">P&aacute;gina 1
<option value="http://www.google.com">google
<option value="nuevo.html">Otra p&aacute;gina
<option value="http://www.yahoo.es">yahoo
<option value="frames.html">Rallada con frames
</select>
</form>


</body>
</html>

Repito, EL PROBLEMA SÓLO APARECE DESPUÉS de haber cargado un enlace exterior en el frame de destino.

Un saludo.

federico

12/8/2004
Cuando subo el jemplo a internet mediante ftp y luego abro el sitio, por defecto abre primero la pagina index.htm y esta deberia ser la que contiene la etiqueta frameset, o sea que al abrir el sitio solo me aparece la pagina index.htm y no se como hacer para que index sea la que contenga la etiqueta frameset.
Desde ya muchas gracias, exelente el sitio, y agradeceria una pronta respuesta, saludos, Federico.

federico

12/8/2004
Recien hice una consulta pero me parece que ya la solucione cambiando el numero de 0 a 1 . Y eso que estaba explicado no?
Che, reitero, muy bueno el sitio.

Gustavo

10/6/2005
Excelente articulo, pensaba que no se podia, hace mucho tiempo estaba buscando esta funcion por parametros simples de Javascript. Gracias

Jesus

06/4/2006
¿como hago para que me abra la selección en una pagina nueva en vez de en la misma pagina donde estoy? Gracias

fernando

27/5/2007
Me gustaria saber como se haria en el caso de un iframe, ya que lo que deseo cambiar es el contenido del iframe

tomii

20/10/2011
No funciona ese Frame
si le das en el menu desplegable rayado iframe

te pone anidado otro iframe y te sale el mismo menu de nuevo, si le das de nuevo en rayado te pone otro iframe y asi hasta llenarse de muchos iframe