Ejemplo 2 de control de frames con Javascript

  • Por
Seguimos realizando ejemplos de acceso desde un frame a otros mediante Javascript.
Vamos a ver otro ejemplo de control de frames con javascript, también muy sencillo, pero donde vamos a profundizar en el acceso a otro tipo elementos dentro de un frame, como pueden ser los formularios.

Este ejemplo va a consistir en tres frames, dispuestos en columnas. En el frame de la izquierda habrá una caja de selección desplegable con varios colores, en el frame del medio otra caja con los frames del documento y en la de la derecha un botón para cambiar el al color seleccionado el fondo del frame seleccionado.

Esperemos que se entienda mejor al ver el ejemplo en funcionamiento.

Veamos parcialmente los códigos de las páginas. El frame de la izquierda tendría el formulario para poner los colores.

<form>
<select name="color">
<option value="red">Rojo
<option value="green">Verde
<option value="Blue">Azul
</select>
</form>


El frame del medio tendría un formulario muy parecido, en este caso para colocar el frame donde deseamos actualizar el color.

<form>
<select name="marcos">
<option value="0">Izquierda
<option value="1">Medio
<option value="2">Derecha
</select>
</form>


Por último veremos la función, que estaría situada en el frame de la derecha, que se pondrá en funcionamiento al pulsar el botón.

function cambiarColor(){
    colorin = parent.frames[0].document.forms[0].color.options[parent.frames[0].document.forms[0].color.selectedIndex].value
    idFrame = parent.frames[1].document.forms[0].marcos.options[parent.frames[1].document.forms[0].marcos.selectedIndex].value
    window.parent.frames[idFrame].document.bgColor = colorin
}


En la función accedemos primero al frame 0 para conseguir el color. Para ello accedemos al formulario donde está el campo select. La nomenclatura puede resultar un poco liosa, pero simplemente estamos accediendo al objeto select para recuperar el valor seleccionado. Las líneas salen tan largas porque recorremos muchos objetos de la jerarquía para llegar a los datos de los objetos que necesitamos.

Accedemos de manera similar al frame 1, para recuperar el color de fondo, navegando por la jerarquía hasta llegar al campo select y extraer su valor.

Por último ejecutamos la sentencia de cambio al color de fondo elegido sobre el frame seleccionado. Para ello accedemos al vector de frames con el índice rescatado en el formulario del frame del medio. Además colocamos en la propiedad bgColor de su document el valor del color seleccionado.

Se puede ver el ejemplo en una página aparte.

Simplificar la función anterior

Este inciso es con objetivo de profundizar un poco en el manejo de objetos con Javascript, aunque no tiene que ver con el tema de frames, puede ser interesante.

La función anterior tiene unas referencias repetitivas sobre objetos que es muy largo referenciar a través de la jerarquía. Podemos guardar en una variable una de esas referencias tan largas para acceder a ella simplemente con el nombre de la variable.

De este modo, nosotros podemos guardar una referencia al campo select del formulario. Así:

campoColor = parent.frames[0].document.forms[0].color

La variable campoColor es lo mismo que acceder por toda la jerarquía hasta el campo select del color. Luego podríamos acceder a una de sus propiedades de manera más corta, por ejemplo a la propiedad selectedIndex, así.

campoColor.selectedIndex

Con estos datos podremos entender este segundo código propuesto para la función anterior

function cambiarColor(){
    campoColor = parent.frames[0].document.forms[0].color
    colorin = campoColor.options[campoColor.selectedIndex].value
    campoFrame = parent.frames[1].document.forms[0].marcos
    idFrame = campoFrame.options[campoFrame.selectedIndex].value
    window.parent.frames[idFrame].document.bgColor = colorin
}

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

degochan

24/3/2008
muy bueno el ejemplo, es casi lo que nececito :p
con una variante lo que yo quiero es cambiar el color de la fuente.
¿ eso se puede?.

Chuibaca

27/10/2009
tengo este problema....
MI pagina web esta maquetada con frames. Cuando la abro en Internet Explorer y navego por ella esta chevere...sin embargo cuando presiono el boton regresar del internet explorer, solo se actualiza un frame, el ultimo. Como hago para que se actualicen todos los frames y no solo uno.

Abel

27/10/2009
tengo este problema....
Mi pagina web la he maquetado con frames. Cuando navego por ella en el internet explorer ocurre que si presiono el boton Regresar, solo se actualiza el ultimo frame. Como hago para que esto no ocurra y se actualicen todos los frames...

alan

24/4/2014
se puede con paginas????
hola, tu pagina me agrado mucho, solo que tengo la siguiente duda...
y si en lugar de modificar el color, coloco una pagina web distinta en cada marco???
me interesa saber si esto es posible, me ayudaría mucho tu respuesta
saludos.

Luis Quiroz Anton

29/8/2014
Desplazar un Iframe mas a la derecha
Hola, existe la posibilidas de tener un cuarto frame y que este aparezca cuando le doy click al boton,
pero osea : el cuarto frame ocuparia la ubicacion del 3ro , -- el 3ro la del segundo , -el 2do la del 1ro Y el 1RO tendria que desaparecer, un efecto algo asi se podria. Correr de derecha a izquierda en el caso de que quisiera tener un 4to frame , que barreria a los demas una posicion a la izquierda..... esto se puede.. mil gracias.

Anselmo

13/1/2016
Distintos dominios...
Y como hacemos para que esto funcione si estamos hablando de distintos dominios???
Es decir, si tengo una ventana principal con unos datos y un iframe y el iframe es de otro dominio.

¿Como puedo acceder desde la ventana principal al iframe y viceversa?

Alex1203

13/5/2017
1 boton con enlace a 2 marcos
buen día, tengo dudas acerca de como insertar dos vinculos a un solo boton interactivo. No se si me explique bien; lo que quiero es que al hacer click en el boton me abra la pagina correspondiente con su respectivo menu, la cual la tengo dividida en marcos.