Baixe Javascript - 05 e outras Notas de estudo em PDF para Informática, somente na Docsity!
Capítulo 5 – As janelas do browser
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 5-
As janelas do browser
A JANELA DO BROWSER é manipulável de várias formas através da linguagem JavaScript. Pode-se alterar dinamicamente várias de suas características como tamanho, aparência e posição, transferir informações entre janelas e frames, abrir e fechar novas janelas e criar janelas de diálogo. Janelas do browser são representadas em JavaScript através de de objetos do tipo Window. Pode-se classificar as janelas usadas em JavaScript em cinco categorias:
- Janela da aplicação: é um papel assumido pela última janela aberta do browser. Se esta janela for fechada, a aplicação é encerrada. Em JavaScript, métodos para fechar janelas (close()) não funcionam na última janela.
- Janelas abertas através de instruções JavaScript: são novas janelas abertas através de um método open(). Podem ter tamanho e características diferentes, ser manipuladas e manipular a janela que as criou, recebendo ou retornando dados, lendo ou alterando propriedades, invocando métodos, inclusive para fechar a outra janela.
- Janelas abertas através de HTML: são janelas abertas usando links com o descritor target (). JavaScript pode carregar novas páginas nessas janelas, mas não pode manipular suas propriedades ou métodos.
- Janelas estruturais: são janelas ou frames que contém uma página HTML que estabelece uma estrutura que divide a janela em frames (contém bloco e não contém ). Possui referências para cada frame que contém.
- Frames de informação: são frames de uma janela pai que contém uma página HTML com informação (contém um bloco ). Este tipo de janela só possui referências para as janelas que as contém. Além das janelas comuns, que contém páginas HTML, há três janelas de diálogo: alerta , confirmação e entrada de dados , que não têm propriedades manipuláveis. Todos os tipos de janelas são representadas através de propriedades do objeto window.
Desenvolvendo Web Sites Interativos com JavaScript
5-2 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Objeto Window
O tipo Window^1 representa janelas. A propriedade global window representa a janela do browser onde roda o script. Através de window, têm-se acesso a outras propriedades que referenciam possíveis sub-janelas, a janela que a criou (se existir) ou frames. Também têm-se acesso a métodos que abrem caixas de diálogo de aviso, confirmação e entrada de dados. As propriedades e métodos de Window , quando referentes à janela atual (objeto window), podem omitir o nome do objeto:
window.status = "oye!"; // ou status = "oye!"; window.open("documento.html"); // ou open("documento.html"); Mas isto só vale se a janela na qual se deseja invocar o método ou a propriedade for a janela atual, onde roda o script. A propriedade window refere-se sempre à janela atual. A tabela abaixo relaciona as propriedades dos objetos do tipo Window. Observe que muitos são objetos Window e, como conseqüência, têm as mesmas propriedades:
Propriedade Acesso Função defaultStatus (^) read /
write
Contém String. Texto que aparece por default na barra de status da janela. status (^) r / w Contém String. Define texto que aparecerá na barra de status. name (^) r / w Contém String. Contém nome da janela. Este nome é utilizável
em HTML no atributo TARGET em e em . Em frames , retorna uma referência Window. document (^) r Contém Document. Referência à página contida na janela. history (^) r Contém History. Referência ao histórico da janela. location (^) r Contém Location. Referência à URL exibida na janela. navigator (^) r Contém Navigator. Referência a string de identificação do browser. opener (^) r Contém Window. Refere-se a janela que abriu esta janela self (^) r Contém Window. Referência à própria janela. Mesmo que window window (^) r Contém Window. Sinônimo de self. frames (^) r Contém Array de Window. Vetor dos frames contidos na janela. length (^) r Contém Number. Número de elementos Window no vetor frames (mesma coisa que window.frames.length) parent (^) r Contém Window. Referência à janela que contém esta janela (só existe quando a janela atual é um frame) top (^) r Contém Window. Referência à janela que não é frame que contém a
janela atual (só existe quando a janela atual é um frame )
(^1) ‘Window’ é um nome genérico que usamos para qualificar janelas. Não há construtor ou qualquer propriedade com este nome. Existe sim, a propriedade window (com “w” minúsculo), que representa a janela atual.
Desenvolvendo Web Sites Interativos com JavaScript
5-4 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Nos exemplos acima, a referência window pode ser omitida ou substituída por outra referência caso os diálogos estejam sendo abertos em outras janelas.
Métodos para manipular janelas
Os métodos restantes definidos para os objetos Window , manipulam parâmetros das janelas, abrem e fecham novas janelas, rolam a página e definem funções de temporização. Estão listados na tabela abaixo.
Método Ação open("URL") ou
open("URL","nome") ou
open("URL","nome", "características")
Abre uma nova janela contendo um documento indicado pela URL. Opcionalmente, a janela pode ter um nome que pode ser usado em HTML, ou ter alteradas características como tamanho, layout, etc. (veja tabela abaixo). Retorna uma referência do tipo Window para a janela criada: filha = window.open("http://a.com/abc.html");
close() (^) Fecha uma janela (não vale para frames para a última janela
da aplicação). blur() (^) Torna uma janela inativa focus() (^) Torna uma janela ativa (traz para a frente das outras, se for
uma janela independente). scroll(x, y) (^) Rola o documento dentro de uma janela de forma que as
coordenadas x e y (em pixels) da página apareçam no canto superior esquerdo da área útil da janela, se possível. setTimeout("instruções", atraso)
Executa uma ou mais instruções JavaScript após um período de atraso em milissegundos. Este método é parecido com a função eval(), mas com temporização. O código continua a ser interpretado imediatamente após o setTimeout(). A espera ocorre em um thread paralelo. Retorna Number : um número de identificação que pode ser passado como argumento do método clearTimeout() para executar a operação imediatamente, ignorando o tempo que falta. clearTimeout(id) (^) Cancela a temporização de uma operação setTimeout()
cujo número de identificação foi passado como parâmetro, e faz com que as instruções do setTimeout() sejam interpretadas e executadas imediatamente.
Capítulo 5 – As janelas do browser
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 5-
Uma janela pode ser aberta em qualquer lugar. Basta fazer: window.open("documento.html"); // ou simplesmente open("documento.html");
Janelas com aparência personalizada
As janelas abertas podem ter várias de suas características alteradas no momento em que são abertas. Estas características deverão vir em uma string com uma lista de opções separadas por vírgulas, como o terceiro argumento opcional do método open(). Cada característica pode ou não ter um valor. Não deverá haver espaços em qualquer lugar da lista. Por exemplo:
window.open("enter.html", "j2", "height=200,width=400,status" );
abre uma janela de 200 pixels de altura por 400 de largura sem barra de ferramentas, sem barra de diretórios, sem campo de entrada de URLs, sem barra de menus, não-redimensionável e com barra de status. As características estão na tabela abaixo:
Característica Resultado height=h (^) h é a altura da janela em pixels: height= width=w (^) w é a largura da janela em pixels: width= resizable (^) Se estiver presente permite redimensionar a janela toolbar (^) Se estiver presente, mostra a barra de ferramentas do browser directories (^) Se estiver presente, mostra a barra de diretórios do browser menubar (^) Se estiver presente, mostra a barra de menus do browser location (^) Se estiver presente, mostra o campo para entrada de URLs status (^) Se estiver presente, mostra a barra de status
Se for utilizado o método open() com três argumentos, qualquer característica acima que não apareça listada no string passado como terceiro argumento, não estará presente.
Propriedades da barra de status
A propriedade defaultStatus determina o valor default do texto que é exibido na barra de status do browser. Geralmente este valor é um string vazio ("") mas pode ser alterado. A propriedade status é usada para mudar o valor da barra de status no momento em que um novo valor é atribuído. Para fazer links informativos, que apresentam uma mensagem na barra de status quando o mouse passa sobre eles, pode-se usar:
Clique Aqui!
Capítulo 5 – As janelas do browser
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 5-
Comunicação entre janelas
Para passar informações para uma janela recém criada, é necessário obter uma referência para a janela. Isto só é possível se a nova janela for criada usando JavaScript. Não funciona para janelas criadas usando HTML. A referência é obtida como valor de retorno do método open():
novaJanela = window.open("pg2.html"); Com a referência novaJanela, que é Window , é possível ter acesso a qualquer propriedade da nova janela e invocar seus métodos, por exemplo:
novaJanela .document.write(""); //acrescenta texto à página da janela novaJanela .focus(); // torna a janela ativa novaJanela .close(); // fecha a janela Se uma janela é criada usando open(), mas o seu valor de retorno não é armazenado em uma variável, não será possível ter acesso às propriedades da janela filha. Mas a nova janela sempre pode ter acesso à janela que a criou, manipular suas propriedades e até fechá- la. Toda janela filha possui uma propriedade opener, que é uma referência à sua janela mãe. Para manipular propriedades e invocar métodos ela poderá fazer:
opener .focus(); // torna a janela mãe ativa opener .document.forms[0].elements[2].value = "Oi mãe!"; opener .close(); // mata a mãe É importante verificar que uma propriedade existe, antes de tentar usá-la. Quando se trabalha com múltiplas janelas, é comum uma janela tentar usar uma propriedade que não existe em outra (ou que ainda não existe). Se uma página procura um formulário em outra janela e a outra janela não mais apresenta a página que tinha o formulário, o browser acusará um erro, informando a inexistência do objeto. A tentativa de acessar propriedades inexistentes provoca erros feios em JavaScript. Os browsers mais novos já escondem as janelas de aviso, mas muitos ainda não o fazem. Uma forma de evitá-los é sempre verificar se um objeto está definido, antes de usá-lo. Isto pode ser feito em JavaScript usando a palavra-chave null:
if (janela != null) { // verifica se janela existe janela.focus(); // coloca na frente if (janela.document.forms[0] != null) { // formulario existe? if (campotexto != null) { janela.document.forms[0].campotexto.value = "OK"; } } } else { janela = open("pagina.html"); janela.document.forms[0].elements[0].value = "OK"; }
Desenvolvendo Web Sites Interativos com JavaScript
5-8 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Exercício Resolvido
Monte duas páginas HTML como mostrado na figura abaixo. A primeira página deve ter um botão “Abre Janela” que, quando apertado, deve abrir uma nova janela nas dimensões 360x280 (pixels). Depois de aberta, a nova janela deverá estar na frente da antiga (use focus()). Depois que as duas janelas estiverem abertas, o texto digitado no campo enviar , da janela menor, deve aparecer na caixa de mensagens da janela maior, logo que o botão envia for pressionado. Em seguida, a janela maior deverá tornar-se ativa. Pode-se fazer o mesmo na janela maior e passar informações para o campo de mensagens da janela menor. Use os esqueletos jan1.html e jan2.html disponíveis no subdiretório cap5/. A solução é mostrada a seguir e está nos nos arquivos jan1sol.html e jan2sol.html.
Solução
O exemplo a seguir ilustra a comunicação entre janelas. São duas listagens. A primeira é o arquivo para a primeira janela e a segunda o arquivo para a sub-janela. Observe o nome do arquivo “jan2.html”. Deve ser idêntico ao primeiro parâmetro do método open() na página abaixo. A página principal contém um botão que permite criar uma nova janela. A partir daí, escreva algo no primeiro campo da nova janela, clique na primeira e veja os dados serem copiados de uma janela para outra.
Desenvolvendo Web Sites Interativos com JavaScript
5-10 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Janela 1
Mensagem a enviar:
Mensagens recebidas:
Frames HTML
Frames são janelas que estão limitadas dentro de outras janelas. Através de referências especiais, é possível, usando JavaScript, manipular as propriedades de qualquer frame dentro de uma janela ou em outra janela. Antes de apresentar, porém, como é possível manipular frames em JavaScript, vejamos como os frames podem ser construídos em HTML. Para dividir uma janela em frames, é preciso criar uma página HTML especificando as dimensões relativas ou absolutas das subjanelas em relação à janela que irá conter a página. Uma página de frames não é um documento HTML, pois não contém informação. Todo documento HTML deve ter a forma:
... ** ... **
O bloco contém a informação da página. O bloco , contém meta- informação, ou seja, informação sobre a página. Páginas de frames têm uma estrutura diferente:
... ** ... **
e não podem conter blocos ^2.
(^2) Até podem conter blocos , mas isto ora os transforma em páginas de informação, ora não causa efeito algum. Um bloco antes do faz com que o browser ignore o . Um bloco após o será ignorado por browsers que suportam frames, mas será lido por browsers antigos que não os suportam.
Capítulo 5 – As janelas do browser
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 5-
O bloco define a divisão da janela em linhas (usando o atributo rows) ou colunas (usando o atributo cols). Os atributos especificam a largura ou altura de cada frame usando valores absoultos, em pixels, ou relativos, em percentagens da largura ou altura da janela principal. Por exemplo, um da forma (figura ao lado):
...
divide a janela principal em três colunas, tendo as duas primeiras ¼da largura total, e a última, metade da largura total. De forma semelhante pode-se dividir a janela em linhas. Neste outro exemplo (figura ao lado):
...
a janela foi dividida em quatro linhas, tendo a primeira e quarta 100 pixels cada de altura, a segunda 200 pixels e a terceira, o espaço restante. Um bloco ... só pode conter dois tipos de elementos:
- descritores , que definem a página HTML que ocupará uma janela. A página HTML poderá ser uma página de informação comum ou outra página de frames que dividirá a sub-janela novamente em linhas ou colunas.
- sub-blocos ... que dividirão outra vez a subjanela (em linhas ou colunas) e poderão conter descritores e novos sub- blocos . O número de sub-blocos para cada dependerá do número de linhas (ou colunas) definidas. Para dividir uma janela em linhas e colunas ou de forma irregular, pode- se proceder de duas formas:
- usar um único , contendo elementos que referem-se a páginas de frames (páginas que definem um ), ou
- usar vários em cascata na mesma página. Usaremos as duas formas para montar a janela ao lado. Na primeira versão, utilizaremos dois arquivos de frames: frset1.html dividirá a janela principal em duas colunas, e frset2.html dividirá a segunda coluna em duas linhas. Na segunda versão, precisaremos de apenas um arquivo de frames (frset.html). As duas versões utilizarão três arquivos de
Capítulo 5 – As janelas do browser
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 5-
Na segunda versão, temos apenas um arquivo de frames contendo referências para os três arquivos de informação. Em negrito está mostrado o segundo frame-set :
...
**
**
Esta segunda versão, possui apenas dois níveis. No primeiro, a página de frames frset.html, no segundo, as páginas de informação. A aparência final é a mesma, nas duas versões, mas na primeira versão há uma janela a mais (janela2) que pode ser manipulada em JavaScript e em HTML. Se a janela2 for utilizada como alvo de um link HTML:
link
os frames janela2_1 e janela2_2, que estão em um nível abaixo de janela2 deixarão de existir e pagina.html ocupará toda a segunda coluna da janela do browser. Isto não poderá ser feito na segunda versão, pois ela só possui dois níveis. Se o link estiver dentro da página dois.html ou tres.html, a sintaxe abaixo, usando o nome especial _parent causará um resultado equivalente:
link
Usando frames em JavaScript
Em JavaScript, frames podem ser manipulados por referências (objetos) que indicam relações hierárquicas, posição dos frames ou seus nomes. Toda página de frames possui um vetor frames que contém referências para os frames, na ordem em que aparecem no . Suponha a seguinte estrutura de frames
...
Desenvolvendo Web Sites Interativos com JavaScript
5-14 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Um script nesta página pode manipular os seus frames de duas formas: pelo nome ou através do vetor frames. O código abaixo mostra duas maneiras diferentes de mudar a cor de fundo das páginas do primeiro e do último frame:
frames[0] .document.bgColor = "red"; frames[2] .document.bgColor = "blue"; // ... é a mesma coisa que... janela1 .document.bgColor = "red"; janela2_2 .document.bgColor = "blue"; Geralmente não há informação alguma nas páginas de frames, muito menos scripts. O mais comum é existirem scripts nas páginas de informação contidas nos frames. Sendo assim, é necessário haver uma referência para a página que contém o frame. Em JavaScript, esta referência é a propriedade parent. Para mudar a cor da página do primeiro frame a partir de um script rodando no último, pode-se fazer:
parent. frames[0].document.bgColor = "red"; // ... ou parent. janela1.document.bgColor = "red"; Isto funciona porque parent é Window , possui a propriedade frames, e conhece o nome janela1, que está definido no código HTML da página que contém. O código acima não funcionaria se tivéssemos usado a estrutura de frames com três níveis, como o primeiro exemplo da seção anterior. Para ter acesso ao primeiro frame, teríamos que subir dois níveis, até o nível mais alto, para então descer um nível até frames[0]. Poderíamos usar parent duas vezes ou a propriedade top , que representa o nível mais alto:
parent.parent. frames[0].document.bgColor = "red"; top. janela1.document.bgColor = "red"; A partir de top pode-se chegar a qualquer frame, usando seu nome ou o vetor frames. Nos casos onde existem apenas dois níveis de frames, top é sinônimo de parent. A figura abaixo mostra várias formas de comunicação entre frames:
Página Web
Página Web
Página Web
Formulário
Formulário
Formulário
ich aus et in unnus buus zich aus char wultt dus par stak can litte simich aus et in unnus buus zich aus char wultt dus par stak can litte sim
ich aus et in unnus buuszich aus char wultt dus par stak can litte sim ich aus et in unnus buus
ich aus et in unnus buus zich aus char wultt dus
ich aus et in unnus buus zich aus char wultt dus par stak can litte simich aus et in unnus buus
a
c
b
parent = top
parent.parent = top
top
parent.frames[0]
top.frames[1].frames[1]
top.frames[0] = parent.parent.frames[0]
