Introducción a JavaScript
Parte 3
Mucha gente me preguntaba como JavaScript trabajaba en conjunto con los frames. Existen muchos
browsers que soportan frames, por ahora el PowerBrowser de Oracle por ejemplo. Pero esta
es aún una versión beta y no soporta JavaScript.
Primero quiero decir algo acerca de los frames. Muchas documentaciones
para HTML no contienen nada acerca de frames porque son relativamente nuevos.
Usando frames usted puede dividir la ventana que muestra las páginas
de HTML en varias partes. De modo que así usted posee partes
individuales en su browser y en cada parte puede cargar páginas
diferentes. Algo interesante es que estos frames pueden interactuar. Esto
significa que pueden intercambiar información el uno con el otro.
Por ejemplo usted puede crear dos frames, uno con su página normal
de HTML y otra con una barra de herramientas, la barra de herramientas puede
contener botones para navegar por su página normal de HTML. Esta
barra de herramientas estará siempre visible mientras usted navega
por otros sitios de la página principal. Primero quiero mostrarle
mas o menos como lucirá esto. Solo preione el botón y observe
lo que son los frames. (en esta oportunidad el programa no se ejecuta en
su máquina, la información baja del servidor, asi que por favor,
espere un momento)
Aquí está el script en HTML para los frames:
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.html" name="fr1">
<FRAME SRC="frtest2.html" name="fr2">
</FRAMESET>
</HTML>
Primero usted le dice al browser cuantos frames quiere tener. Esto está definido en el tag <frameset...>. Escribiendo rows el browser dividirá el espacio descrito en barras. Se pueden crear varias columnas usando cols en lugar de rows. Se pueden usar varios tags <frameset...>. Aquí va un ejemplo distribuido por Netscape:
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
Esto creará dos columnas y la segunda columna es dividida en 3 partes
iguales. Los 50%,50% el primer tag <frameset> le dicen al browser que tan
grandes serán los frames.
Usted le puede dar nombres a sus frames. Esto es muy importante para el uso
con JavaScript. En el primer ejemplo puede ver como los frames toman sus
nombres. Usando el tag <frame> se le dice al browser que página de
HTML cargar.
Creo que los elementos básicos de los frames son fáciles de entende, ahora miremos nuestro próximo ejemplo:
Esto le mostrará una ventana donde puede presionar algunos botones
para escribir algun texto en otro frame.
Aquí va la fuente:
Para crear los frames necesitará (frames.htm):
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.htm" name="fr1" noresize>
<FRAME SRC="frame2.htm" name="fr2">
</FRAMESET>
</HTML>
Aquí está la fuente para frame1.htm:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("Hola!<br>");
}
function yo() {
document.write("Entonces!<br>");
}
function bla() {
document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<BODY>
Este es nuestro primer frame!
</BODY>
</HTML>
Y ahora frame2.htm:
<HTML>
<body>
Este es nuestro segundo frame!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Hi" onClick="parent.fr1.hi()">
<INPUT TYPE="button" VALUE="Yo" onClick="parent.fr1.yo()">
<INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
Estos scripts se tornan mas y mas largos. Veamos: 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. Estas funciones 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'.
De la forma en que usted observó como empleo <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...
Si usted ha creado algunos frames y en alguno de estos frames hay algunos links y si alguien toma un link y los frames no desaparecen, esto es perfecto si el usuario permanece en su página y usted quiere tener una barra de menús. Pero si el usuario salta hacia otra página en Internet, su barra de menús ya no debe ser necesitada. Entonces, ¿ se pueden borrar los frames antes creados?
Solo escriba TARGET="_top" a cada link que apunte hacia otro lugar en Internet
en el tag <a href...>. Esto se ve mas o menos así:
<a href="saliendo.html" TARGET="_top">si no quiere quedarse mas en mi página</a>
Por supuesto, se debe agregar TARGET="_top" a cada link que apunte hacia otro lugar. Si cada link en su página apunta hacia otro sitio tambien puede escribir <base target="_top"> en el head de su página de HTML. Esto significa que cada link en la página borra los frames.