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.
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.
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
}
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
No hay comentarios:
Publicar un comentario