Aula 19: Manipulação de Janelas e Frames

As formas de programação que vimos até aqui envolviam apenas uma janela ou
frame. Aplicações reais, geralmente, envolvem múltiplas janelas ou frames.
Nesta aula explicaremos como as diversas janelas e frames podem interagir e
cooperar umas com as outras e com os programas que nelas são executados.

Objetivos:
Nesta aula você aprenderá:
- como usar, abrir e fechar janelas;
- como programar com temporizadores;
- a usar o objeto frame;
- como fazer referências entre frames.

Pré-requisitos:
As aulas anteriores.

1. Manipulando Janelas
O principal objeto da hierarquia do JavaScript, como já comentamos diversas
vezes, é o objeto Window e abaixo dele encontram-se todos os elementos de
uma página HTML que podem ser manipulados através da linguagem
JavaScript. Além do objeto representando a janela corrente, cada janela do
browser e cada frame dentro da janela são representados também por um objeto
Window. Nesta aula exploraremos as propriedades e métodos deste objeto e
mostraremos algumas interessantes técnicas de programação com janelas e
frames.

As principais propriedades do Window são os arrays de formulários, links,

âncoras e imagens da página. Além destes arrays de objetos, esse objeto
contém as propriedades mostradas na tabela 19.1 .

1
 Tabela 19.1- Propriedades do objeto Window
Propriedade Descrição
closed Especifica se a window foi fechada.
defaultStatus Texto com a mensagem mostrada na barra de status
do browser.
document Referência ao objeto Document contido na janela
frames[] Array do objeto Window que representa os frames
dentro da janela.
history Referência ao objeto history da janela
location URL da página sendo exibida, definindo essa
propriedade causa o carregamento de um novo
documento.
name Nome da janela.
opener Janela onde foi aberta a janela atual.
parent Se a janela corrente for um frame, refere-se ao frame da
janela que a contém.
screen Referência ao objeto Screen da janela.
self Referência à própria janela, mesmo que window.
status Mensagem temporária na barra de status.
top Referência à janela top-level que contém a janela
atual.
window Referência à própria janela, mesmo que self.

Não foram incluídas na tabela anterior as diversas propriedades dependentes do

navegador. Este objeto também suporta diversos métodos importantes, como os
mostrados na tabela 18.2.

2
 Tabela 19.2- Métodos do objeto Window
Método Descrição
alert() Mostra uma mensagem simples em uma caixa de
diálogo com botão Ok.
blur() Retira o foco de uma janela.
clearInterval() Cancela ou determina a execução periódica de um
/ trecho de código f após um período de intervalo t
setInterval(f,t) milissegundos (f pode conter múltiplos comandos
separados por ";").
clearTimeout()/ Desprograma o timer ou programa o timer para
setTimeout(f,t) executar a função f após t milissegundos.
close ( ) Fecha uma janela.
confirm(p) Apresenta em uma caixa de diálogo à pergunta p e
botões Ok (retorna true) e Cancel (retorna
false).
focus ( ) Coloca o foco numa janela, movendo-a para frente
de todas.
moveBy(dx,dy) Move a janela da posição atual dx pixels para a
direita ou dy pixels para baixo.
moveTo(x,y) Move o canto superior esquerdo da janela para a
posição x y .
open Cria e/ou abre uma janela carregando o documento
(s1,s2,s3,sb) s1, tendo como nome s2 e de acordo com as
(mais detalhes na
seção 1.2) propriedades indicadas em s3, na forma sb .
prompt(s,d) Mostra a string s em uma caixa de diálogo com os
botões Ok e Cancel e um campo de entrada de
texto com a string d. Retorna o texto fornecido.
resizeBy Redimensiona a janela aumentando-a de dx pixels
(dx,dy) na horizontal e dy na vertical.
resizeTo(x,y) Redimensiona a janela para x pixels na horizontal e
y na vertical.
scrollBy(dx,dy) Rola o documento interior à janela para a posição
scrollTo(x,y) x,y ou de um valor dx,dy .

Foram omitidos na tabela acima métodos dependentes do navegador. Os

métodos alert, prompt e confirm (que já foram usados diversas vezes
deste o início deste módulo de nosso curso), assim como a propriedade
location, são métodos que podem ser invocados sem a necessidade de se
indicar o objeto Window. As duas linhas abaixo são portanto equivalentes:
alert(“mensagem ao usuário !”);
window.alert(“mensagem ao usuário !”);

As linhas que seguem exemplificam o uso de location e confirm em uma

aplicação útil: direcionamento de uma página para um novo "endereço".
<HTML>
<HEAD>
<TITLE>Redirecionando automaticamente
</TITLE>
<SCRIPT LANGUAGE="JavaScript">

3
 <!--
function redire()
{
//href e window podem ser omitidos
if (confirm ("A página mudou-se. " +
"\n Clique OK \n " +
"para ver a nova. "))
location = "novo-endereco.html";
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="redire()">
<H2>Redirecionando automaticamente</H2>
<SCRIPT LANGUAGE="JavaScript">
<!--
document["bgColor"]="lightpink";
// -->
</SCRIPT>
</BODY>
</HTML>

1.1. Janelas Secundárias

Abrir um documento em uma janela diferente da atual é útil em diversas

situações. Pode se usar este artifício para abrir documentos fora do nosso site e
dessa forma sua página não é sobrescrita por um documento alheio. Outra
utilidade é abrir uma janela com instruções para preencher um formulário, sem
contudo apagar o próprio formulário.

A forma de abrir uma nova janela em JavaScript é através do método open do

objeto Window. Como indicado na tabela 19.2, este método pode receber até
4 parâmetros: s1 ; s2 ; s3 e sb.

O primeiro dos parâmetros de open, s1, é uma string opcional e

representa a URL do documento a ser carregado na nova janela. Se for omitido
ou se for uma string vazia permite a criação de uma página em branco.

O segundo parâmetro é também uma string opcional e corresponde a um nome

para ser atribuído à propriedade name (não pode conter espaços). Se for
fornecido um nome que já existe, o método não irá criar uma nova janela, mas
simplesmente retornará uma referência à janela especificada, sendo neste caso
ignorado o terceiro argumento.

O terceiro parâmetro é opcional e se não for especificado a nova janela terá as

características padrão. O valor deste parâmetro corresponde a uma string
indicando que recursos (separados por vírgula e sem espaços) devem ser
incluídos na janela a ser aberta. A tabela 19.3, a seguir, mostra os recursos que
podem ser definidos, a forma como devem aparecer e seu significado. A
maioria destes recursos deve ter os valores yes ou no. E se apenas

4
aparecerem, isso é, forem incluídas na string, sem qualquer valor, é suposto
que seu valor seja yes. Se não aparecer, o valor da característica é suposto ser
no. Para a largura e altura, os valores devem ser sempre especificados e
correspondem ao número de pixels.

O último argumento ou parâmetro que também é opcional representa um

booleano. Isso é dependendo de sb ser true ou false, a url que será
carregada substituirá ou não a corrente na history do browser.

Tabela 19.3- Recursos possíveis de compor o terceiro parâmetro de

método open do objeto Window
Recurso Significado
height Altura e largura da janela onde o documento será mostrado.
width
titlebar Se a janela terá ou não área de título (yes ou no).
status Se a janela terá ou não barra de status (yes ou no).
scrollbars Se a janela terá ou não barras de rolagem (yes ou no).
resizable Se a janela pode ou não ser redimensionada (yes ou no).
menubar Se a janela terá ou não menu (yes ou no).
location Se a janela terá ou não a barra de endereços (yes ou no).
toolbar Se terá ou não a barra de ferramentas (toolbar) do
browser.

Na tabela 19.3 foram omitidos recursos dependentes do navegador. O exemplo

a seguir ilustra a criação de uma janela de dimensões 400x350, com
scrollbars e sem toolbar, área de endereço e barra de status. Esta
janela será posteriormente referenciada pela variável jan:
var jan = window.open(“outraPag.html”,
“janelaNova”,
“toolbar=no,location=no,”+
“status=no,scrollbars=yes,”+
“width=400,height=350”);

Como a janela principal, as janelas criadas através do open também têm um

document e com o método write é possível escrever nela. O método
focus faz com que a janela seja exibida na frente das outras janelas (mesmo
daquelas que não têm nada a ver com o navegador). Para fechar a janela
utiliza-se o método close. O uso destes métodos é demonstrado nas linhas de
código abaixo:
<HTML>
<HEAD>
<TITLE>Abrindo janelas</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
jan = null;
function Abrir()
{
jan = open("","novaJanela",
"resizable=yes,width=99,height=99");
jan.document.write("<H3>Janela ");
jan.document.write(" Secundária");
jan.document.write("</H3><HR><BR>");
}

5
function Texto()
{
//verifica se pode abrir
if (jan != null && !jan.closed)
{
jan.document.write("<p>Mais texto</p>");
jan.focus();
}
else
Fechada();
}
function Fechada()
{
alert ("Abra antes !");
}
</SCRIPT>
</HEAD>
<BODY bgcolor=lightblue>
<H2>Abrindo nova janela</H2>
<FORM>
<input type="button" value="Abrir Janela"
onclick="Abrir()">
<input type="button" value="Escrever nela"
onclick="Texto()">
<input type="button" value="Fecha-la"
onclick="if (!jan.closed) jan.close()">
</FORM>
</BODY>
</HTML>

A nova janela pode se referir à janela que a criou através da propriedade

opener (tabela 19.1). Desta maneira, as duas janelas podem se referir uma a
outra, e cada uma pode ler propriedades e invocar métodos da outra.

1.2. Limites de Tempo

O método setTimeout (tabela 19.2) permite programar a execução de uma

função após uma determinada quantidade de milissegundos. Este método
faz com que a função seja executada apenas uma vez. Para executar um
número indeterminado de vezes, basta incluir dentro da função uma nova
chamada ao setTimeout ou usar o método setInterval. É possível
que seja necessário interromper a seqüência de execuções após alguma
condição, o que é feito através do método clearTimeout ou
clearInterval. As duas linhas de código abaixo mostram como devem ser
utilizados este métodos:
tempo = setTimeout("instrucao",tempo);
clearTimeout(tempo);

As linhas de código que seguem mostram como as funções setInterval e

clearInterval podem ser usadas. Você deve salvar o primeiro código no
arquivo exeJanelas.html e o segundo em um arquivo denominado
exeJanelas-a.html, ou mudar as linhas "location=..." para os
nomes que você usou para cada arquivo:
<!--primeiro arquivo:'exeJanelas.html'-->
<HTML>

6
<HEAD>
<TITLE>Primeira</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
function Muda()
{
location='exeJanelas-a.html'
}
</SCRIPT>
</HEAD>
<BODY
onload="mude=setInterval('Muda()',999)"bgcolor="kh
aki">
<H3>Pagina:<FONT SIZE=+4>1</FONT></H3>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Parar"
onclick="clearInterval(mude)">
<INPUT TYPE="BUTTON" VALUE="Seguir"
onclick="Muda()">
</FORM>
</BODY>
</HTML>
<!--segundo arquivo:'exeJanelas-a.html'-->
<HTML>
<HEAD>
<TITLE>Segunda</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
function Muda()
{
location='exeJanelas.html'
}
</SCRIPT>
</HEAD>
<BODY onload="mude=setInterval('Muda()',999)"
bgcolor="gold">
<H3> Pagina :
<FONT SIZE=+4>2</FONT></H3>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Parar"
onclick="clearInterval(mude)">
<INPUT TYPE="BUTTON" VALUE="Seguir"
onclick="Muda()">
</FORM>
</BODY>
</HTML>

2. Manipulando Frames

Vimos no módulo de HTML que é possível dividir uma janela em várias partes
independentes, chamadas frames. Em JavaScript, um frame se comporta
exatamente como uma janela, tendo as mesmas propriedades e métodos. O
objeto Window tem um array com um objeto para cada frame definido na
janela. Cada frame de uma janela pode se referir a outro usando as
propriedades do objeto Window: frames[], parent e top.(tabela
19.1).

Como foi visto em HTML, é possível que um frame esteja exibindo um

7
documento que cria novos frames. Como os frames são representados por
objetos Window, logo também possuem um array frames[ ], que pode
ser usado para referenciar aos frames deste documento interno. Pode-se assim
simplesmente acumular diversos subníveis de frames.

O exemplo a seguir mostra um arquivo de layout que divide a janela em 2

frames:

<HTML>
<HEAD>
<TITLE>Exemplo de frames</TITLE>
</HEAD>
<FRAMESET COLS="75%,25%">
<FRAME NAME=“fra” SRC="pa.htm">
<FRAME NAME=“flay” SRC="lay.htm">
</FRAMESET>
</HTML>

Se o arquivo lay.htm também fosse um arquivo de layout com o código

mostrado a seguir:

<HTML>
<HEAD>
<TITLE>Arquivo lay.htm</TITLE>
</HEAD>
<FRAMESET ROWS="*,*,*">
<FRAME NAME=“frb” SRC="pb.htm">
<FRAME NAME=“frc” SRC="pc.htm">
<FRAME NAME=“frd” SRC="pd.htm">
</FRAMESET>
</HTML>

a exibição do primeiro arquivo produziria uma página com a seguinte

aparência:

frb

frc
fra
frd

Ao observar estes arquivos de layout é possível notar que a divisão em frames

é feita em dois níveis: no primeiro nível, a janela é dividida em duas colunas (2
frames); no segundo nível, o segundo frame é subdividido em três linhas (3
frames). O objeto Window tem portanto um array de dois elementos, sendo
que o segundo elemento do array (window.frame[1]), por sua vez, tem
um array de frames com três elementos. Como cada frame pode ser acessado
pelo array frames ou pelo nome definido no atributo name, as duas formas
de escrever uma frase no frame de nome frb mostradas abaixo são válidas e
têm o mesmo significado:

8
window.frames[1].frames[0].document.write(“uma frase
!”);
window.frames[1].frb.document.write
(“uma frase !”);

Cada window tem a propriedade parent que se refere ao frame que

contém o seu arquivo de layout. Assim, o primeiro frame da coluna esquerda
pode se referir ao seu vizinho como parent.frames[1].

Se um frame está contido dentro de outro frame que é contido por uma janela ,
o frame pode se referir à janela de nível mais elevado por
parent.parent.

A propriedade top é neste caso um simplificador. Não importa quantos

subníveis estejam envolvidos a cada nível de frames, top irá se referir ao
frame que está exibindo o arquivo de layout que causou a abertura de todos os
outros, isto é o de mais alto nível na hierarquia.

Após entender bem as linhas de código abaixo, tente modificá-las para layout
mais complexos, usando para referir-se aos níveis:
• top
• parent.parent
• parent.frames[]
• frames[].frames[].frames[].

<!-- arquivo principal -->

<HTML>
<HEAD>
<TITLE>Escrevendo em frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,20%,20%,20%">
<FRAME SRC="ex-a.html" NAME="f1">
<FRAME SRC="ex-b.html" NAME="f2">
<FRAME SRC="ex-c.html" NAME="f3">
<FRAME SRC="ex-d.html" NAME="f4">
</FRAMESET>
<NOFRAMES>
<P>Browser inadequado a frames</P>
</NOFRAMES>
</HTML>

<HTML><!-- arquivo ex-a.html -->

<HEAD>
<TITLE>Escrevendo em Frames</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function n1()
{
parent.f2.document.write("Um texto");
parent.f1.document.bgColor="tan"

9
 }
function n2()
{
parent.f3.document.write("texto<BR>");
parent.f2.document.bgColor="tan"
}
function n3()
{
parent.f4.document.write("<p>isso</p>");
parent.f3.document.bgColor="tan"
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Escrevendo em Frames:</H1>
<I>Em que frame quer escrever?</I>
<FORM>
<INPUT TYPE="BUTTON" VALUE="f2" onclick="n1()">
<INPUT TYPE="BUTTON" VALUE="f3" onclick="n2()">
<INPUT TYPE="BUTTON" VALUE="f4" onclick="n3()">
</FORM>
</BODY>
</HTML>

<HTML><!-- arquivo ex-b.html -->

<HEAD>
<TITLE>Frame 2</TITLE>
</HEAD>
<BODY>
<H2>f2</H2><br>frames[1]
</BODY>
</HTML>

<HTML><!-- arquivo ex-c.html -->

<HEAD>
<TITLE>Frame 3</TITLE>
</HEAD>
<BODY>
<H2>f3</H2><br>frames[2]
</BODY>
</HTML>

<HTML><!-- arquivo ex-d.html -->

<HEAD>
<TITLE>Frame 4</TITLE>
</HEAD>
<BODY>
<H2>f4</H2><br>frames[3]
</BODY>
</HTML>

10
Exercícios:

1. Utilize o exemplo apresentado no final da seção 1 e visualize o resultado

que terá se trocar as linhas do exemplo "novo-endereco.html" pelo
nome de uma página qualquer.

2. Misture cada uma das formas possíveis de abrir janelas da tabela 19.3 no
exemplo do final da seção 1.2. Teste também sem qualquer recurso e sem
algum dos parâmetros de open para verificar as formas padrão.

3. Use os métodos setTimeout() e clearTimeout() para gerar uma

seqüência de 3 janelas que se referenciam recursivamente (isto é, onde a
primeira chama a segunda, e a segunda chama a terceira e esta retorna a
primeira) enquanto o usuário não apertar algum botão para parar o processo.
(Dica: você pode usar a mesma estrutura dos dois arquivos do final da seção
1.2 ampliando a estrutura agora para 3 arquivos e trocando os métodos lá
usados de manipulação de tempo!)

4. Depois de visualizar e entender bem as formas de referência a frames. Faça o

sugerido no final da seção 2. Isto é, usando o exemplo completo apresentado,
transforme os frames para terem diversos layout e subníveis de forma a
entender bem as formas de manipulação entre os diversos níveis.

Resumo:

Nesta aula, você aprendeu a usar diversas janelas e frames. Conheceu as

formas de usar temporizadores. Podemos dizer que está quase pronto para ser
um eficiente programador em JavaScript. Há pouquíssimo a ver agora!
Estamos quase lá....

Auto-avaliação:

Voltamos a dizer que a complexidade do assunto neste final do curso não deve
assustá-lo. Não desanime e volte sempre a reler os pontos que ficaram um
pouco obscuros.

11