Clique aqui para ver o que é uma janela secundária

Em determinadas ocasiões é muito útil abrir um link em uma janela secundária, ou seja, uma janela a parte que se abre para mostrar uma informação específica. Algumas vantagens de abrir um link em uma janela secundária seriam:

• O usuário não sai da página onde estava o link.
• A janela secundária pode ser configurada livremente com o qual podem ser feitas janela maiores ou menores e com mais ou menos menus.
• Em geral, o grau de controle da janela secundária utilizando Javascript aumenta.

Para abrir uma janela secundária podemos fazer de duas maneiras, com HTML e com Javascript. Vejamos cada uma delas:

Abrir uma janela com HTML

Pode-se conseguir abrir uma janela secundária muito facilmente simplesmente com HTML. Para isso podemos utilizar o atributo TARGET das etiquetas HREF. Se colocamos target="_blank" no link, a página se abrirá numa janela secundária. Também podemos colocar target="xxx" para que o link se apresente na janela chamada xxx ou no frame xxx.

O link teria que ter esta forma:

<a href="minhapagina.html" target="_blank">

O problema de abrir uma página secundária com HTML consiste em que não podemos definir a forma desta e nem poderemos exercer maior controle sobre ela tal como comentávamos entre as vantagens de abrir uma janela secundária com Javascript. A janela que se abre sempre será como o usuário tenha definido por padrão em seu navegador.

Abrir uma janela com Javascript

Para abrir uma janela com Javascript podemos utilizar a sentença window.open(). Não tem problema se você não conhece Javascript, visto que é muito simples utiliza-lo para este caso. Veremos passo a passo como abrir uma janela secundária utilizando Javascript.

1. Sentença Javascript para abrir uma janela

A sentença é simplesmente a função window.open(), o mais complicado é saber como utilizar esta função, mas agora veremos que não requer nenhuma complicação.

A função window.open() recebe três parâmetros, que se colocam dentro dos parênteses, deste modo:

window.open(URL,nome_da_janela,forma_da_janela)

Vejamos rapidamente cada um destes parâmetros separadamente.

URL: representa o URL que desejamos abrir na janela secundária, por exemplo http://www.criarweb.com
nome_da_janela: é o nome que se atribui a esta janela para dirigir links com o atributo target do HTML
forma_da_janela: se indica o aspecto que vai ter a janela secundáaria. Por exemplo, pode-se definir sua altura, largura, se têm barras de deslocamento, etc

Vejamos um exemplo de sentença Javascript completa para abrir uma janela secundária:

window.open("http://www.criarweb.com" , "janela1" , "width=120,height=300,scrollbars=NO")

Isto quer dizer que abra a página inicial de criarweb.com em uma janela secundária a qual vamos chamar janela1. Ademais, a janela será de 120 pixels de largura, 300 de altura e não terá barras de deslocamento.

Um esclarecimento adicional, se depois de abrir essa janela colocarmos outro link na página que abria a janela cujo atributo target está dirigido para o nome_da_janela (neste caso janela1), este link será mostrado na janela secundária.

2. Função que abre uma janela

Os mais cômodo para abrir uma janela é colocar uma função Javascript que se encarregue das tarefas de abri-la e que receba por parâmetro a URL que se deseja abrir.

O script é simples, vejamos a seguir:

<script language=javascript>
function janelaSecundaria (URL){
   window.open(URL,"janela1","width=120,height=300,scrollbars=NO")
}
</script>

3. Colocamos um link

Este link não deve estar dirigido diretamente à página que quisermos abrir, e sim, à sentença Javascript necessária para abrir a janela secundária. Para executar uma sentença Javascript com o clique de um link, fazemos assim:

<a href="javascript:sentenca_javascript_para_abrir_a_janela">

4. O link chama à função que abre a janela

Agora Vejamos como ficaria todo esse link na página.

<a href="javascript:janelaSecundaria('http://www.criarweb.com')"> Clique neste link para abrir a janela secundaria</a>

Que dá como resulado:

Há que observar que as aspas simples são as que são colocadas para definir o URL que se passa como parâmetro da função janelaSecundaria(). São aspas simples porque o href do link já tem umas aspas duplas, e dentro das aspas duplas sempre se deve utilizar aspas simples a não ser que desejemos fechar as aspas duplas.

Parâmetros para dar forma a uma janela

Estes atributos podem ser utilizados na função window.open() para definir a forma que desejar que tenha sua janela secundária.

Width	Ajusta a largura da janela. Em pixels
Height	Ajusta a altura da janela
Top	Indica a posição da janela. Na verdade é a distancia em pixels que existe entre a borda superior da tela e a borda superior da janela.
Left	Indica a posição da janela. Em concreto é a distancia em pixels que existe entre a borda esquerda da tela e a borda da janela.
Scrollbars	Para definir de forma exata se saem ou não as barras de deslocamento. scrollbars=NO fazem com que nunca saiam. Scrollbars=YES faz com que sempre saiam (sempre em ie e somente se forem necessárias em NTS).
Resizable	Establece se se pode ou não modificar o tamanho da janela. Com resizable=YES pode-se modificar o tamanho e com resizable=NO consegue-se um tamanho fixo.
Directories (barra diretorios)	A partir de aqui se enumeram outra série de propriedades que serven para mostrar ou não um elemento da barra de navegação que tem os navegadores mais populares, como poderia ser a barra de menus ou a barra de estado. Quando colocamos o atributo=YES estamos forçando que esse elemento seja visto. Quando colocamos atributo=NO o que fazemos é evitar que esse elemento seja visto.
Location (barra endereços)
Menubar (barra de menus)
Status (barra de estado)
Titlebar (a barra do título)
Toolbar (barra de ferramentas)

Abrir uma janela sem um link

Em outras ocasiões desejaremos abrir uma janela secundária automaticamente, ou seja, sem a necessidade de que o usuário clique sobre nenhum link. Neste caso, o código da função janelaSecundaria nos serve também e teremos que acrescentar uma linha de código Javascript em seguida da função janelaSecundaria. Esta linha a acrescentar simplesmente será uma chamada à função que se executará Segundo esteja carregando a página. Vejamos como ficaria este código:

<script language=javascript>
function janelaSecundaria (URL){
   window.open(URL,"janela1","width=120,height=300,scrollbars=NO")
}

janelaSecundaria("http://www.criarweb.com");
</script>

Fica em negrito o que seria a chamada à função que abre a janela secundária, como está fora de uma função se executa segundo estiver carregando a página.