19.0.Manipulação de Janelas e Frames

Prévia do material em texto

1 
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 . 
 
2 
 
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. 
 
3 
 
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() 
/ 
setInterval(f,t)
Cancela ou determina a execução periódica de um 
trecho de código f após um período de intervalo t 
milissegundos (f pode conter múltiplos comandos 
separados por ";"). 
clearTimeout()/ 
setTimeout(f,t) 
Desprograma o timer ou programa o timer para 
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 
(s1,s2,s3,sb) 
(mais detalhes na 
seção 1.2) 
Cria e/ou abre uma janela carregando o documento 
s1, tendo como nome s2 e de acordo com as 
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 
(dx,dy) 
Redimensiona a janela aumentando-a de dx pixels 
na horizontal e dy na vertical. 
resizeTo(x,y) Redimensiona a janela para x pixels na horizontal e 
y na vertical. 
scrollBy(dx,dy) 
scrollTo(x,y) 
Rola o documento interior à janela para a posição
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"> 
 
4 
 <!-- 
 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 
 
5 
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 
width 
Altura e largura da janela onde o documento será mostrado. 
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>"); 
} 
 
6 
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> 
 
7 
<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 
 
8 
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: 
 
9 
 
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" 
 
10 
 } 
 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> 
 
 
11 
 
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.