Este artículo permite continuar aprendiendo sobre el trabajo con Frames y Javascript. Es un ejemplo sobre interoperabilidad con frames, en el que mostramos cómo se puede acceder al DOM de un frame desde otro frame.

Antes de comenzar, queremos llamar la atención sobre algunos algunos detalles importantes que debes tener en cuenta sobre los frames y Javascript.

• Para acceder a frames diferentes, su código HTML tiene que ser de páginas que estén alojadas en el mismo dominio.
• Los frames han dejado de estar soportados en HTML5, por lo que solo podrás hacer estos ejemplos con la etiqueta IFRAME. Aunque en el artículo nos referimos constantemente a "frames" en realidad debemos saber que hoy serán siempre iframes, que es la etiqueta soportada.

Explicaciones del trabajo con frames

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.

El código completo de este ejercicio y un enlace para ver el ejemplo en marcha lo encuentras en este repositorio de GitHub: https://github.com/deswebcom/trabajo-entre-frames.

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 el acceso al DOM en los selects

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
}

Con esto hemos aprendido un poco más sobre el tratamiento de frames en Javascript. Lo cierto es que a día de hoy no se utilizan tanto estas técnicas, ya que los frames están un poco olvidados. Sin embargo, sigue siendo un buen ejercicio para aprender más sobre Javascript y la manipulación del DOM de la página.

Recuerda que tienes otros artículos de control de frames en Javascript para seguir aprendiendo técnicas similares.