11. Especial: As Janelas
Uma das "funções" mais utilizadas na
linguagem JavaScript é a de manipular janelas. A JavaScript possui várias
maneiras de controlar as janelas, abrir e fechar são as mais utilizadas
entre elas. Uma nova janela, se bem utilizada dentro de uma página HTML,
permite chamar a atenção do Internauta para algo importante, relacionado
ao assunto em questão naquela página, ou algo importante no contexto do
Site. Também é muito utilizada para propaganda.
Abrir uma nova janela à partir de uma página
HTML até que é muito simples, veja o código-exemplo abaixo:
.....
<BODY>
.......
<A HREF="janela.htm" TARGET="NEW"><IMG
BORDER=0 SRC="imagem.gif"></A>
.....
</BODY>
....
O problema com este código (puro HTML) é que o autor, da página, não tem o mínimo controle sobre a
janela criada; na verdade esse código abre uma nova janela no browser
utilizado, com as mesmas características da janela anterior. Isso inclui
as mesmas barras de ferramentas, dimensões, etc.
Para que se tenha um controle maior sobre a
nova janela que se vai abrir, é necessário lançar mão de comandos da JavaScript. Como veremos à seguir:
Digamos que se deseje
abrir uma janela, que possa ser alterada em tamanho (resizable), com a
Barra de Menu do browser (menubar), com um tamanho inicial de 250 por 150
pixels, que contenha a página janela_a.htm, e que receba o nome de
janela_1. Para tal o código abaixo pode ser utilizado:
window.open('janela_a.htm','janela_1','menubar,resizable,width=250,height=150');
Para usar tal código, basta fazer a seguinte
chamada (que no caso usa um botão de FORM):
<FORM>
<INPUT type=button value="Abre uma
janela"
onClick="window.open('janela_a.htm','janela_1',
'menubar,resizable,width=250,height=150');">
</FORM>
Para ver um Exemplo, clique no botão
abaixo:
|
|
- Comentários sobre o exemplo:
- open é um método do
objeto window
- o método open aceita 3
parâmetros, cada um devendo estar entre aspas (duplas ou
simples)
- o primeiro parâmetro especifica o
endereço (URL) do documento que deve ser carregado
na janela, quando ela abrir pela primeira vez;
- o segundo parâmetro especifica um
nome para a janela, e é usado quando você precisa
reactivar essa janela novamente (seja de dentro de um FORM, como no
exemplo, seja através de um link tipo âncora)
- o terceiro parâmetro, opcional, é uma
lista de características - separadas por vírgulas -
que se deseja dotar à nova janela
Aliás você deve ter notado o botão para
fechar a janela de exemplo que você abriu acima, não?. Bom ele também se
utiliza do objecto window, só que agora com o método close. O código que está lá colocado é o
seguinte:
<FORM>
<INPUT type=button value="Feche ESTA
janela" onClick="window.close();">
</FORM>
Entre as características, mais usuais, que a
JavaScript permite utilizar para o objecto window,
temos:
- menubar
(habilita/não
habilita a Barra de Menu do browser);
- toolbar
(habilita/não
habilita a Barra de Ferramentas do browser);
- location
(habilita/não
habilita a janela Location do browser);
- status
(habilita/não
habilita a Barra de Status do browser);
- scroolbars
(habilita/não
habilita as barras de rolagem do browser);
- resizable
(habilita/não
habilita a possibilidade do Internauta alterar o tamanho da nova
janela);
- width
(define a largura,
em pixels, da nova janela do browser);
- height (define a altura,
em pixels, da nova janela do browser);
Para definir as características para a nova
janela (excepto width e height que devem ser definidos através de números
inteiros) é possível lançar mão de 4 métodos diferentes:
- não define nenhuma característica no
comando window.open
> A nova janela terá todas essas
características habilitadas...
> ex.: window.open('janela.htm','janela','width=200,height=130'); - define as características
desejadas apenas
> A nova janela terá apenas as características
definidas habilitadas...
> ex.: window.open('janela.htm','janela','status,resizable,width=200,height=130'); - atribui o valor lógico
true(YES) - ou false(NO) - às características desejadas
> A nova
janela terá as características ligadas por true e não terá as desligadas
por false...
> ex.: window.open('janela.htm','janela','status=yes,resizable=no,width=200,height=130'); - atribui o valor lógico 1 -
ou 0 - às características desejadas
> A nova janela terá as
características ligadas por 1 e não terá as desligadas por 0 ...
>
ex.: window.open('janela.htm','janela','status=1,resizable=0,width=200,height=130');
Incrementando Ainda
Mais
Se em sua página, ou Site, necessita se
referir várias vezes à chamada para abrir uma nova janela, o ideal é dar
uma incrementada, e utilizar recursos mais avançados da JavaScript.
Construir uma função genérica que possa ser chamada através da passagem de
parâmetros.
Para exemplificar, vamos imaginar a
necessidade apenas de abrir novas janelas, com o nome e o endereço
passíveis de alteração, mantendo as características inalteradas. O exemplo
abaixo mostra uma função desse tipo:
function
openWin(url,name) {
popupWin = window.open(url, name,
'menubar,toolbar,resizable,width=300,height=200');
}
Para chamar essa função use algo no estilo do
exemplo abaixo:
<A
HREF="javascript:openWin('janela_b.htm','janela_2');">
<IMG BORDER=0
SRC="imagem.gif"></A>
Comentários sobre o exemplo:
- Dentro da função openWin(),
popupWin é o nome dado à
variável que contém a referência para a janela;
- Use esta variável quando for referir às
propriedades e métodos da janela. Por exemplo, o valor de
popupWin.name é
janela_2, e chamando com o
comando popupWin.focus() fará com que a
janela janela_2 seja trazida para a
frente da janela, que estiver aberta no momento da chamada.
Observações
Importantes:
- Não confonda esta variável (uma referência
para o objecto window), com o nome da janela
(neste caso a string janela_2). Se você tentar usar o
nome para referenciar a janela (for exemplo: janela_2.close()),
você obterá um erro de JavaScript: "janela_2 is not defined".
- Veja que escolhendo um novo nome
(janela_2) uma outra janela é aberta (agora temos a janela denominada
janela_1 e a janela denominada janela_2 abertas simultaneamente. Se o
desejado fosse enviar a página janela_b.htm para a primeira janela
aberta, então deveria ter sido utilizado aquela nome (janela_1) na
chamada openWin().
Comentários
Finais:
Nunca se esqueça de que este recurso deve ser usado com parcimónia máxima. Não encha a tela com mais de 2 dessas janelas, se possível apenas
1, e se não precisar para nada NÃO ABRA UMA NOVA
JANELA. Usado sem cuidado este recurso acabará cansando os
visitantes da sua Home Page, ao invés de levar à eles informações
importantes e úteis.
|
