Ejemplo 2 de control de frames con Javascript

06/6/03 - 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ía, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba