PAI
FILHOS
A janela do browser pode ser dividida em muitas frames, de forma que uma frame pode ser vista como uma area retangular dentro da janela do browser. Cada frame mostra seu próprio documento, deste modo você pode por exemplo criar duas frames, na primeira carregar a Home Page da Netscape e na segunda a minha Home Page...
Para criar frames você precisa de duas TAGs: <FRAMESET> e <FRAME>. Uma página HTML para criar duas frames poderia ser assim:
frames.htm
<html>
<title>Exemplo de criação de
frames</title>
<body>
<FRAMESET rows="50%,50%">
<FRAME SRC="pag_01.htm" NAME="frame1">
<FRAME SRC="pag_02.htm" NAME="frame2">
</FRAMESET>
</body>
</html>
A seguir temos os documentos que serão carregados nas duas frames:
pag_01.htm
<html>
<title>Primeira frame</title>
<body>
<form name="cliente">
<p>
<center>NOME: <input type="text" name="nome" value="" size=30>
</center>
</form>
</body>
</html>
pag_02.htm
<html>
<title>Segunda frame</title>
<body>
<form name="fornecedor">
<p>
<center>FORNECEDOR <input type="text" name="empresa" value="" size=30>
</center>
</form>
</body>
</html>
Os códigos acima produziriam duas frames. Você pode perceber que foi usada a propriedade rows na TAG <FREMESET>, este método faz com que a janela do browser seja dividida em linhas e as frames fiquem uma acima da outra. A frame de cima carrega o documento HTML pag_01.htm e a frame de baixo carrega o documento HTML pag_02.htm.
Se você quiser ter colunas ao em vez de linhas, basta trocar a propriedade rows, por cols dentro da TAG <FRAMESET>. A parte "50%,50%" especifica o tamanho das duas janelas. Você pode escrever "50%,*" se não quiser calcular o tamanho da segunda frame, note que "*" representará o valor necessário para se completar 100%. Se você preferir especificar o tamanho em pixels, basta omitir o símbolo "%".
Toda frame recebe um nome único, especificado pela propriedade NAME na TAG <FRAME>. Isso nos ajudará quando acessarmos as frames diretamente com JavaScript.
Frames e JavaScript
Agora precisamos ter uma visão de como JavaScript enxerga as
frames na janela do browser, para isso criamos duas frames, como
visto no exemplo anterior.
Uma vez que JavaScript organiza todos os elementos de um documento HTML em um esquema hierárquico, isso não será diferente para as frames. A imagem abaixo mostra o esquema hierárquico do primeiro exemplo:
|
|
PAI
FILHOS
|
Poderemos então resolver o seguinte problema: O usuário clica em um link na primeira frame, mas a página referenciada por este link deveria ser carregada na segunda frame. Isso pode ser usado por exemplo, para criar barras de menu onde uma frame permanece inalterada oferecendo vários links diferentes que serão sempre carregados em outra frame.
Observemos três casos:
- Janela/frame pai acessa a frame filho;
- Frame filho acessa a janela/frame pai;
- Frame filho acessa outra frame filho;
Do ponto de vista da janela do browser, as duas frames são chamadas frame1 e frame2. Você pode ver na imagem abaixo, que existe uma conexão direta da janela pai para cada uma das duas frames. Deste modo se você tiver um código na janela pai (na página que cria as frames) e você precisar acessar as frames, pode-se usar o nome das frames, para referenciá-las. Por exemplo, você pode escrever: frame2.document.write("mensagem da janela pai");
|
|
PAI
FILHO
|
Algumas vezes é necessário acessar de uma frame, a janela pai. Isso é secessário se você precisar remover as frames, de modo a carregar uma nova página em vez da página criadora das frames. Nós podemos acessar a janela pai (ou frame pai) das frames filho com parent. No comando para carregar um novo documento nós temos que atribuir uma nova URL para location.href (propriedade href do objeto location). Como nós queremos remover as frames, temos que usar o objeto location da janela pai. Como cada frame pode carregar sua própria página HTML, nós possuímos também um objeto location para cada frame. Podemos carregar uma nova página na janela pai com o comando: parent.location.href="http://www.oocities.org/CapitolHill/6126/index.htm".
|
|
PAI
FILHO
|
Mais cedo ou mais tarde, se você optar por trabalhar com frames, terá o xeguinte problema: acessar uma frame filho, de outra frame filho. Na figura abaixo, você pode ver que não existe uma ligação direta entre as frames filho, desta forma, não podemos chamar frame2 diretamente da frame1, uma vez que as frames filhos não tem conhecimento umas das outras. Do ponto de vista da janela pai, a segunda frame é conhecida como frame2 e do ponto de vista da primeira frame, a janela pai é conhecida como parent. Sendo assim, temos que escrever o seguinte código para acessar (da primeira frame) o objeto document da segunda frame: parent.frame2.document.write("Isto veio da frame1!!!");
|
|
PAI
FILHO
|
Eventos
onLoad - Ocorre quando o documento termina de ser
carregado.
Ex: <FRAMESET rows = "50%, 50%" onLoad="alert('frames sendo
montadas!')">
onUnload - Ocorre quando o documento é
substituído por outro na janela do browser.
Ex: <FRAMESET rows = "50%, 50%" onUnload="alert('encerrando
processamento da página!')">
Propriedades
defaultStatus - Exibe um
texto na barra de status do browser (em vez de "Document: DONE").
Ex: <body onLoad='window.defaultStatus="Tutorial JavaScript"'>
Em meus testes esta propriedade não funcionou muito bem,
sendo assim, arrumei um jeitinho para causar um efeito
semelhante:
<html>
<title>Exemplo</title>
<SCRIPT><!--
TimeOut = null;
/*
Você pode utilizar este código em sua Home Page,
só não exclua este cabeçalho. Conto com sua
conciencia!
(c) 1997 Anderson Barros Torres
*/
function inicio()
{
self.defaultStatus='Tutorial JavaScript';
TimeOut=setTimeout('inicio()',1);
clearTimeout(TimeOut);
TimeOut=setTimeout('prossegue()',0);
}
function prossegue()
{
self.defaultStatus='Tutorial JavaScript';
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="inicio ()">
<P><A HREF="">Este link não faz nada!</A>
</body>
</html>
self - É utilizado para referir a janela/frame
atual - a que está com o foco, no momento. Sendo útil
especialmente quando se tem janelas/frames com mesmo nome de outro
elemento da janela atual.
Ex: Veja o exemplo acima.
status - Propicia, que seja
alterada a mensagem que aparece na linha de status do browser, quando
se passa com o mouse em cima de um link, ou seja, quando posicionamos
o mouse em cima de um link, na linha de status aparece a URL do link,
com esta propriedade é possível personalizar a barra de
status.
Ex: window.status = 'Qualquer coisa...'
self.status = 'Você decide
o que vai colocar aqui!'
