Aquí está el script en HTML para los frames:
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:
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.
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.
Para crear los frames necesitará (frames.htm):
Aquí está la fuente para frame1.htm:
Y ahora frame2.htm:
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):
Este concepto se puede extender, se pueden crear 'nietos' y sería
como así:
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...
Si usted a creado algunos frames y en algunod 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í:
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.
Mucha gente me preguntaba como JavaScript trabajaba en conjunto con los frames. Para usar
frames con JavaScript tiene que tener Netscape Navigator 2.0 en el momento. 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)
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.html" name="fr1">
<FRAME SRC="frtest2.html" name="fr2">
</FRAMESET>
</HTML>
<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>
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.
Aquí va la fuente:
<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>
<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>
<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>
frames.htm padre
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) niños
frames.htm padre
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) niños
/ \
/ \
/ \
nieto1 nieto2 'nietos'
<a href="saliendo.html" TARGET="_top">si no quiere quedarse mas en mi
página</a>
Last changed: 25.Feb.96
Traducción y adaptación:
J. Mauricio Cuenca Hernández.
© 1996 by Stefan Koch