Introdução ao JavaScript
Muita gente já me perguntou como se trabalha com frames no JavaScript. Para usar frames
no JavaScript você deve ter pelo menos o Netscape Navigator 2.0 neste momento. É claro
que existem outros browsers que suportam frames também, mas em geral eles não suportam o
JavaScript - embora eu ache que não vai demorar muito tempo para termos outros browsers
que suportam frames e JavaScript ao mesmo tempo.
Em primeiro lugar, eu gostaria de falar um pouco sobre frames. Muitas das documentações
sobre HTML não têm nada sobre sobre frames porque esse recurso é uma coisa recente. Ao
usar frames você pode 'dividir' em várias partes a janela que mostra as páginas HTML.
Assim, você terá algumas partes independentes na sua janela, e poderá carregar páginas
diferentes nos frames. Uma coisa legal é que estes frames podem se interagir, isto é,
eles podem trocar informações entre si. Por exemplo, você poderia criar 2 frames, um
com a sua página HTML normal e outro com uma barra de ferramentas. A barra de ferramentas
poderia conter botões para navegação através da sua página HTML normal. Essa barra de
ferramentas seria sempre visível, mesmo quando outra página HTML fosse carregada no
outro frame. Antes de mais nada eu gostaria de lhe mostrar como seria isso: pressione o
botão e veja como são os frames (se você estiver olhando para esta página on-line,
então vai ter que esperar um tempinho ao pressionar o botão nesta parte do tutorial
porque os scripts são carregados a partir do servidor).
Aqui está o script HTML para frames:
<HTML> <HEAD> <title>Frames</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frtest1.htm" name="fr1"> <FRAME SRC="frtest2.htm" name="fr2"> </FRAMESET> </HTML>
Em primeiro lugar você diz ao browser quantos frames você quer ter. Isto se define no descritor <frameset...> . Ao designar linhas (rows) no descritor, o browser irá dividir o espaço indicado em linhas. Você também pode criar colunas se usar cols ao invés de rows. Você também pode usar vários descritores ou tags de <frameset...> ao mesmo tempo. Veja o exemplo dado pela 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>
São criadas duas colunas, e a segunda coluna é
dividida em tres partes iguais. Os números 50%,50% no primeiro descritor <frameset>
informam ao browser o tamanho que os frames devem ter.
Você pode dar nomes aos seus frames. Isto é importante para o uso com JavaScript. No
primeiro exemplo acima é possível ver como se nomeiam os frames: ao se utilizar o tag
<frame> você informa ao browser que página HTML ele deve carregar.
Acho que os elementos básicos dos frames são fáceis de entender. Agora, dê uma olhada no nosso próximo exemplo:
Aqui se abre uma janela onde se pode clicar em
alguns botões para que seja possível escrever textos em outro frame.
Segue-se a fonte:
Para se criar frames, você vai precisar (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>
Aqui está a fonte de frame1.htm:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("Alô!<br>");
}
function yo() {
document.write("E aí?<br>");
}
function bla() {
document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<BODY>
Este é o nosso primeiro frame!
</BODY>
</HTML>
E aqui o frame2.htm:
<HTML> <body> Este é o nosso segundo frame! <p> <FORM NAME="buttonbar"> <INPUT TYPE="button" VALUE="Alô" onClick="parent.fr1.hi()"> <INPUT TYPE="button" VALUE="E aí?" onClick="parent.fr1.yo()"> <INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()"> </FORM> </BODY> </HTML>
Uau! Estes scripts vão ficando cada vez mais longos! O que se fez agora? O usuário carrega o primeiro arquivo (frames.htm). Isto cria os frames e carrega os arquivos HTML frame1.htm no primeiro frame (nomeado como 'fr1') e frame2.htm no segundo frame (chamado 'fr2'). Até agora isto é puro HTML. Como se pode notar, o primeiro script frame1.htm contém algumas funções JavaScript. Mas elas não são chamadas no primeiro script. Então por que elas seriam necessárias afinal de contas? Será que eu sou tão preguiçoso a ponto de não deletar essas funções desnecessárias? Ainda que eu seja mesmo um preguiçoso, na realidade essas funções são necessárias. Elas serão chamadas pelo segundo script frame2.htm! Nós criamos alguns botões neste segundo script do mesmo modo como fizemos na primeira parte desta introdução. A propriedade onClick já é familiar também. Mas o que será que significa parent.fr1... ?
Se você já é familiarizado com esses objetos então nada disso é novidade. Como se pôde notar acima, os arquivos frame1.htm e frame2.htm são convocados pelo arquivo frames.htm. Nós podemos dizer que frames.htm é o pai dos outros dois frames. Conseqüentemente os novos dois frames podem ser chamados de frames filhos de frames.htm. Você pode observar que há uma certa hierarquia que proporciona um interrelacionamento entre os diferentes frames. Vou tentar demonstrar essa idéia com a ajuda de um pequeno 'gráfico' (arte ASCII descreveria isso muito melhor...):
frames.htm pai / \ / \ / \ fr1(frame1.htm) fr2(frame2.htm) filhos
É lógico que você pode estender este conceito. Você pode criar também alguns 'netos' (se quiser chamar desse jeito - esta não é uma expressão oficial!). Isso ficaria assim:
frames.htm pai / \ / \ / \ fr1(frame1.htm) fr2(frame2.htm) filhos / \ / \ / \ gchild1 gchild2 'netos'
Se você deseja indexar alguma coisa ao frame-pai a partir de frame2.htm, basta colocar simplesmente parent. diante da função que se pretende convocar. Para se referir às funções definidas em frame1.htm a partir do frame-pai, basta colocar fr1 diante da função convocante. Por que fr1? No nosso script no frame-pai (frames.htm) nós criamos frames diferentes e lhes demos nomes diferentes. Eu escolhi fr1 para o primeiro frame. O passo seguinte é fácil. Como se chama o primeiro frame se você quer se referir a ele a partir de frame2.htm (o qual é mantido no segundo frame chamado fr2)? Como se pode ver pelo meu horrível gráfico não há nenhuma conexão direta entre frame1.htm e frame2.htm. Por isso, não se pode convocar funções definidas em frame1.htm, diretamente a partir de frame2.htm. Você deve se referir a elas através do frame-pai. Assim, a correta indexação é parent.fr1. Se você quiser convocar a função hi() a partir de frame2.htm é preciso escrever parent.fr1.hi(). Isto é o que foi feito no segundo script na propriedade onClick.
Se você criou alguns frames, e alguém segue os links, os frames não vão desaparecer. Isso está correto se o usuário 'permanecer' na sua página. Você poderia criar uma barra de menus que poderia ser mostrada em um frame todo o tempo, por exemplo. Mas se o usuário quiser saltar para outra página na Internet, a sua barra de menus não será mais necessária. Então, como se pode deletar os frames depois de criados?
Coloque TARGET="_top" no seu descritor
<a href...> . Isto ficará assim:
<a href="saida.html" TARGET="_top">se você não quiser mais ficar preso na minha página</a>
Naturalmente você deve colocar o TARGET="_top" em todos os links que conduzam 'para fora'. Se todos os links da sua página levarem 'para fora', você também pode escrever <base target="_top"> no head da sua página HTML. Isto vai significar que todos os links da página apagam os frames.