java_frame.gif (15397 bytes)

¿Qué son los Frames?

Cuando definimos una página que usará frames, dividimos la ventana actual en un conjunto de subpantallas que contienen cada una diversas páginas de HTML (inclusive provenientes de distintos sitios de Internet), cuyo tamaño está dado como un porcentaje de la ventana total o como una distancia en pixeles (algo muy semejante a la definición de tablas). Al realizar esto, el desarrollador puede buscar dos cosas: la primera es presentar de forma concisa y compacta una gran cantidad de información; la segunda, es la posibilidad de interactuar y obtener resultados (en una sola ventana) utilizando diferententes páginas HTML al mismo tiempo. Esto significa que los frames pueden intercambiar información el uno con el otro. Seguramente usted ya habrá visto páginas que usan frames debido a que una de sus aplicaciones más comunes son las relacionadas al establecimiento de una página  de "resultados" y junto a ella (en alguno de los ejemplos por lo regular) existe otra página con botones o ligas que actúan como menú principal. De esta forma, usted puede seguir "navegando" mientras que conserva una serie de recursos disponbles todo el tiempo.

Como ustde debe saber, no todas las versiones de los navegadores pueden usar frames (tal y como ocurre con JavaScript), tiene que tener Netscape Navigator 2.0 o al uno otro browser superior o compatible.

Recordando la Creación de Frames con HTML

Como usted debe comprender, no es el prooósito de este manual el describir detalladamente la estructura  y funcionamiento de la etiqueta FRAMES; sin embargo, es necesario repasar sus características para comprender mejor la foma en que JavaScript puede interactuar con él.

Para utilizar los frames de HTML, necesitamos de dos etiquetas importantes:

a) <FRAMESET>

            Esta etiqueta sustituye a la etiqueta <body> y tiene tres funciones importantes:

            1) Indicar al browser que la página cargada contiene frames.
            2) Definir el número de columnas y renglones en los que deberá ser dividida la pantalla.
            3) Estalecer el tamaño o proporción de cada frame para su correcta visulaización.

b) <FRAME>

            Por su parte, esta etiqueta sirve para definir las propiedades de cada frame, las cuales son:

            i) Scrolling = " yes | no | auto "
            Con esta opción, definimos si la ventana tendrá barra de desplazamiento (por omisión esta en "auto").

            ii) Noresize
            Indica si el usuario podrá o no modificar el tamaño del frame.

            iii) Name
            Como todos los objetos, puede hacerse referencia a un frame por su nombre.

            iv) Marginwidth = " # | % "
            Especifica el ancho del frame, puede ser en pixeles o en porcentaje.

            v) Marginheight = " # | % "
            Especifica el alto del frame, puede ser en pixeles o en porcentaje.
 

Elementos tales como las formas, los botones, las hiperligas, etc. tienen definida la propiedad  Target = "<frame>"; con la cual, podemos definir en que frame o ventana deberán ser arrojados los resultados de hacer click en cualquiera de ellos.

Para entender esto, considere dos casos radicalmente expremos. Por una parte, imagine que en esta misma  página aparece una hiperliga y que usted desea observar el contenido de esta. Dado que en la página actual existen frames, la página será desplegada en el frame en el que se encuentre la hiperliga ( bien en otro frame si usted redirecciona la salida tal y como ocurre en el menú de la izquierda). Ahora bien, puede darse el caso de que usted ya no necesite visualizar la barra de menú; en ese caso, usted deseará ir a la página pero desplegandola completa en la ventana de su browser. Esto puede realizarse mediante la expresión TARGET="_top".

Esto puede ser entendido más fácilmente probando las siguientes hiperligas:
 
 


¿Cómo usar Frames con JavaScript?
 
 
Ejemplo de Frames en JavaScript
 

Wow! Estos scripts se tornan mas y mas largos! Que hay hecho aquí? El usuario carga el primer archivo (frames.htm). Este crea los frames y carga el archivo de HTML frame1.htm al primer frame (llamado 'fr1') y frame2.htm al segundo frame (llamado 'fr2'). Hasta aquí estamos en HTML puro. Como puede ver el primer script frame1.htm contiene algunas funciones de JavaScript. Pero estas no son invocadas en el primer script. No son estas funciones necesarias del todo? Me da mucha pereza de borrar las funciones inservibles? Aunque yo soy un tipo peresozo, esta funciones si son necesarias. Ellas son invocadas por el segundo script frame2.htm! Nosotros hicimos algunos botones en este segundo script como lo hicimos en la primera parte de esta introducción. La propiedad onClick ya es muy familiar. Pero que significa el parent.fr1...?

 Si está familiarizado con objetos, entonces esto no es nuevo para usted. Como pudo ver antes, el frame1.htm y el frame2.htm son invocados por el archivo frames.htm. Frames.htm es el padre de los otros dos frames. En consecuencia los dos nuevos frames son llamados frames niños de frames.htm. Se puede observar que esto es un tipo de jerarquía que da una cierta interrelación entre los diferentes frames. Trataré de mostrarle la idea con ayuda de una pequeña gráfica (sería mejor descrita como arte-ASCII):

              frames.htm                padre
               /      \
              /        \
             /          \
  fr1(frame1.htm)     fr2(frame2.htm)   niños

Este concepto se puede extender, se pueden crear 'nietos' y sería como así:

              frames.htm                padre
               /      \
              /        \
             /          \
  fr1(frame1.htm)     fr2(frame2.htm)   niños
          /  \
         /    \
        /      \
     nieto1   nieto2                    'nietos'

Si desea indexar algo en el frame padre desde el frame2.htm, solo pone al padre antes de la función que va a invocar. Direccionar las funciones definidas en frame1.htm desde el frame padre puede ser hecho ubicando fr1 antes de la funcion a llamar. Por qué fr1? En su script del frame padre (frames.htm) usted creó scripts diferentes y los llamó de forma diferente. Yo escogí fr1 para el primer frame. El siguiente paso es fácil. Como es invocado el primer frame si usted desea indexarlo desde frame2.htm (el cual se mantiene en el segundo frame llamado fr2)? Como puede ver en mi asombrosa gráfica no existe conección entre frame1.htm y frame2.htm. Si usted no puede invocar las funciones desde frame2.htm definidas en frame1.htm. Entonces tiene que indexarla desde el frame padre. De modo que el index correcto es parent.fr1. Si desea invocar la función hi() desde frame2.htm es solo cuestión de escribir parent.fr1.hi(). Esto es lo que está hecho en el segundo script en la propiedad 'onClick'.

Oh, de la forma en que usted observó como uso <script language= "JavaScript"> en lugar de <script language="LiveScript"> en las dos primeras partes no existe una diferencia del todo. Pero como JavaScript fue implementado dentro del Netscape browser se podria usar la expresion LiveScript primero. (Este es lenguaje script viejo de Netscape - JavaScript es completamente similar). Creo que como estamos escribiendo funciones en JavaScript, debemos usar la expresion JavaScript. (Hay una discusion en la sociedad del JavaScript acerca de lo que es LiveScript. Hay varias opiniones. Esta es mi version...