Abertura e configuração de popups com Javascript

Este artigo lhe mostrará com detalhes como abrir janelas e configurar sua forma.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 18/7/05
Valorize este artigo:
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:

Clique neste link para abrir a janela secundária

(Na página que formos colocar este link deveríamos ter o script que fizemos anteriormente que continha a função para abrir a janela.)

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.





Comentários do artigo
Foram enviados 22 comentários ao artigo
13 comentários não revisados
9 comentários revisados:
Por: Rogério
21/7/05
Exelente artigo muito bem explicado! Mesmo eu que não mancho nada de javascript entendi perfeitamente. Parabéns ao autor
Por: natalina
10/12/05
esse artigo ta optimo, so falta ver como passar partametros para essa janele.
por exemplo o valor de uma escolha de um utilizador, ou um campo chave...
Por: Thiago
04/1/06
Excelente tutorial, me ajudou bastante!
Obrigado!
Por: farley rangel
23/11/06
não é bloqueada com filtros anti-pop-up esta janela? Dá pra abrir a janela centralizada na tela?
Por: Carlos Madeira Cunha
22/3/07
Muito bom mesmo o artigo,gostei da forma como é explicado, mesmo que você não entenda nada de html. parabéns!
Por: Tiago
23/3/07
Legal, mas gostaria de saber como faço pra passar o valor de uma variavel da pagina principal para uma secundaria!!!
Me respondam!!! preciso saber pois estou desenvolvendo um programa para meu estagio.
Por: Tiago
06/4/07
Muito bom o artigo. Mas eu precisava de um script assim, com o link sendo uma figura.
Clico na figura e abre a popup entende?
Se puder me ajudar, agradeço.
Por: Tiago C
30/4/07
Para links diversos, tentem assim:
<a href="#" onClick="javascript:window.open('link')">[Link ou imagem aqui]</a>
PHP
Por: paulofaria
05/10/09
Gostei do post, só que eu esta precisando que ele funcionasse de um while no php, tem como? ainda não entrei como abrir um pop-up a partir daí.
Grato a todos.
Paulo Faria.

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato