Janelas e Frames

Janelas e Frames

O JavaScript dispõe de cinco objectos directamente relacionados com o browser, documentos visualizados e janelas: o window, frame, document, navigator e screen.

Estes objectos foram já descritos, o objectivo é mostrar como gerir janelas e frames em páginas Web, usando o JavaScript como linguagem de suporte.

window

Este objecto JavaScript, descreve cada janela que é aberta pelo browser. Cada instância do objecto window representa uma janela nova, assim, ao criar uma janela, também lhe associamos um objecto JavaScript de forma automática.

Este é um dos objectos mais importantes, tão importante que muitas vezes o utilizamos por omissão. Por exemplo:

document.write("Teste");

assume o objecto window corrente. É formalmente equivalente a:

window.document.write("Teste");

Duas das acções mais importantes que se podem tomar com este objecto são de facto, abrir e fechar janelas. Por exemplo:

win=open("http://www.sapo.pt", "sapo");

abre uma janela com o URL indicado.

Esta instrução pode ser associada a um evento, resultando no aparecimento de uma nova janela acedendo a uma página Web:

<html>

<head>

<title> Teste de janelas </title>

</head>

</body>

</html>

Fechar uma janela é também uma operação simples:

win.close();

fecha a janela que acabámos de abrir.

Este tipo de acções pode ser associado a eventos, permitindo abrir e fechar janelas como resposta a acções do utilizador.

O exemplo seguinte mostra uma modificação simples do anterior, associando a um botão:

<html>

<head>

<title> Teste de janelas </title>

</head>

Teste

</body>

</html>

Ao pressionar o botão, a janela nova desaparece.

Frames

A utilização de frames traz a possibilidade de divisão da janela do browser em ecrãs lógicos, cada um dos quais com a capacidade para se comportar como uma janela distinta, designada por "frame".

Uma janela pode assim ser constituída por várias frames, cada uma delas sendo descrita por um pedaço de código HTML distinto.

Uma página Web divide-se em trames, utilizando para tal o elemento HTML <frameset ...>, no qual é definida a divisão lógica do documento.

O elemento HTML <frameset ...> aceita como parâmetros dois atributos básicos: rows e cols. Estes definem o número de linhas ou colunas em que a janela vai ser dividida. As dimensões das frames são normalmente dadas na altura da sua definição.

Por exemplo:

<frameset rows = "30,30,20">

divide o ecrã em três frames horizontais, as duas primeiras com 30 pixels de altura e a terceira com 20.

Também podem ser construídas expressões como:

<frameset cols = "20,20,*">

Neste caso, temos o ecrã dividido em colunas, as duas primeiras com 20 pixels de largura e a terceira com o tamanho variável, dependente do tamanho da janela do browser em cada momento.

Contudo, a forma mais útil de especificar frames é utilizando relações percentuais entre os tamanhos delas, porque deverá ser tido em conta que os utilizadores dispõem de monitores com resoluções diversas.

Por exemplo:

<frameset rows = "40%,*">

divide a janela em duas frames, a primeira ocupando 40% do espaço e a segunda o restante.

Dentro de um "frameset" utilizam-se elementos <frame …> para especificar qual o código HTML que corresponde a cada frame. Este elemento admite os seguintes atributos:

Atributos:

src

Indica o URL do código HTML que corresponde à frame.

name

Indica o nome da frame.

noresize

Indica que a frame tem um tamanho fixo, que não pode ser modificado pelo utilizador.

scrolling

Indica se as barras de deslocação estão ou não acessíveis ao utilizador (YES, NO ou AUTO).

marginheight

Indica o espaçamento em pixels em relação às margens superior e inferior.

marginwidth

Indica o espaçamento em relação às margens verticais.

As frames podem ser colocadas umas dentro das outras para produzir estruturas complexas. Com estes elementos de sintaxe, podemos já construir como exemplo uma página que utilize frames:

<html>

<head>

<title> Demo de Frames </title>

</head>

</frameset>

Esta página tem Frames! Obtenha um browser que as visualize.

</noframes>

</html>

Repare-se que o elemento HTML <frameset> substitui o <body> no documento.

Neste exemplo, temos duas frames horizontais, estando a de baixo dividida em três frames verticais. Cada frame tem um ficheiro HTML associado, que simplesmente tem no corpo do documento uma palavra identificativa do ecrã.

O "ecrã3" tem, neste exemplo, o parâmetro "marginheight" colocado a "0", para notar a diferença de aspecto visual sobre os elementos constantes da página HTML colocada na frame:

Um dos problemas que podem existir com a utilização de frames é o dos brawsers antigos que não as interpretem. Assim, pode ser empregue uma secção HTML delimitada pelos elementos <noframes> e </noframes>, que pode conter código HTML que é ignorado, mas que é interpretado por qualquer browser que não reconheça frames.

Outra questão que se pode colocar na utilização de frames acontece quando existem links dentro de uma frame. No caso de nada ser especificado, o novo endereço vai ser carregado no interior da área delimitada pela frame.

Por exemplo:

<a href="http://www. google.com"> Google </a>

Contudo, isto pode nem sempre ser o que se pretende, até porque pode ser aborrecido para o utilizador visualizar a página remota numa frame de dimensões reduzidas. Para evitar este facto, utiliza-se um atributo designado por target, associado ao elemento HTML que define o link <a hrerf = "..." ...>).

Este pode tomar os seguintes valores:

_blank

A página é carregada numa nova janela.

_self

A página é carregada na mesma janela em que o link aparece.

_parent

A página é carregada na janela mãe da frame onde está o link.

_top

A página é carregada na totalidade da janela do browser.

Para além disso, o atributo target também pode apontar para o nome (parâmetro name) de umaframe.

Assim, poderíamos forçar um carregamento da página Web apontada por um link, fazendo uma pequena alteração ao ficheiro:

<a href="http://www.google.com" target="_top"> Google </a>

A visualização da página que é carregada ao seguir o link é agora feita em toda a janela do browser e não no reduzido espaço da frame onde se encontra o link.

Frames e JavaScript

O JavaScript é, como foi referido, muito útil para o trabalho com frarnes. O objecto "window" dispõe da propriedade "frames", que consiste num array de objectos representando todas as frames de um determinado frameset.

Na prática, existem duas formas de fazer referência ao conteúdo de uma determinada frame.

A primeira consiste em considerar as frames como elementos do array frames, como no exemplo que se segue, em que um script a correr na trame da esquerda altera um elemento da frame da direita:

Ficheiro Main.html:

<html>

<head>

<title> Demo de Frames </title>

</head>

</frameset>

</html>

Ficheiro ecran1.html:

<html>

<head>

<title> Demo de Frames </title>

</head>

Ecrã 1

</body>

</html>

Ficheiro ecran2.html:

<html>

<head>

<title> Demo de Frames </title>

</head>

<body>

Ecrã 2 <br/>

Nome:

</textarea>

</form>

</body>

</html>

Repare-se que no código HTML da frame da esquerda, o script JavaScript efectua uma operação sobre um elemento da form que integra a frame do lado direito, mais precisamente coloca o valor do campo de texto com " Texto ".

Para referenciar as diversas frames, utiliza-se, neste caso, o array "parent.frames[]", onde "parent" referencia a janela mãe.

Também poderia ser utilizada a referência "top"; no caso de as frames estarem embebidas umas nas outras e se pretender referenciar a janela de topo:

top.frames[1].document.forms[0].texto1.value = "Texto";

Repare-se, ainda, que o conteúdo de uma frame consiste num novo documento HTML e, portanto, representado por um objecto "document" próprio.

Uma outra forma, e a mais recomendável, de referenciar as frames é pelos respectivos nomes. O script poderia ser transformado na seguinte sintaxe, mais elucidativa:

top.frame2.document.myForm.texto1.value = "Texto";

Neste caso, tanto a frame como o form que esta contém são referenciados pelos respectivos nomes, em vez dos arrays de elementos que os contêm. Numa página com vários elementos é uma forma bastante mais amigável de os representar.

Utilizando o JavaScript em conjunto com esquemas de frames, temos a possibilidade de implementar páginas com bastante complexidade, em que as frames podem interagir umas com as outras e em que se tem sempre controlo sobre os elementos posicionados nas diferentes páginas HTML que compõem as frames. Caso contrário, cada frame será uma entidade distinta, independente das outras, sem a possibilidade de uma gestão integrada da página Web como um todo.