Abrindo uma página ou foto em janela pop-up (Método window.open)

Você já deve ter se perguntado como os sites fazem para abrir uma nova janela pop-up, com tamanhos pré-definidos e retirando alguns recursos desta janela.

A resposta está aqui no método “window.open“. Vejamos a sintaxe:

minhaJanela = window.open( URL, name [ , features [, replace ] ] );

O valor retornado, armazenado na variável “minhaJanela”, faz referência à janela que foi aberta. Você pode usar essa referência para usar em outra ocasião, como o comando de fechar a janela “minhaJanela.close()“, dar um focus nela “minhaJanela.focus()” ou realizar qualquer manipulação nesta janela.

Agora vamos detalhar melhor cada parte da sintaxe para um melhor entendimento:

  • URL – Especifica qual arquivo será aberto nesta nova janela. Pode ser uma página ou uma imagem, por exemplo;
  • name – Determina qual será o nome da janela aberta. É útil quando você quer colocar um link na página do site que irá fazer referência na popup “<a href=’pagina.html’ target=’nomeDaJanela’>“;
  • features – Este parâmetro é opcional. Serve para passar algumas características que essa nova janela terá. Suas características devem ser separadas por vírgula;
  • replace – Parâmetro opcional e booleano. Se estiver como verdadeiro, ele irá acrescentar o que foi feito nesta nova janela no histórico do navegador. Alguns navegadores ignoram este parâmetro.

Agora vamos as features possíveis:

  • toolbar=0/1 -Exibir a barra de Ferramentas;
  • location=0/1 – Exibir a barra de Endereços;
  • directories=0/1 – Exibir os botões de diretórios do Netscape;
  • status=0/1 – Exibir a barra de Status;
  • menubar=0/1 – Exibir a barra de Menu;
  • scrollbars=0/1 – Exibir as barras de Rolagem;
  • resizable=0/1 – Especifica se a nova janela será redimensionável;
  • width=pixels – Determina a largura da tela;
  • heigth=pixels – Determina a altura da tela;
  • top=pixels – Determina a cordenada Y da tela, pegando como referência o canto superior esquerdo da tela;
  • left=pixelsDetermina a cordenada X da tela, pegando como referência o canto superior esquerdo da tela;

Agora vamos ao exemplo funcional:

<html>
<head>
<title>Abrindo Pop-up</title>
<script type="text/javascript">
<!--
function abrirJanela(pagina, largura, altura) {
 // Definindo centro da tela
 var esquerda = (screen.width - largura)/2;
 var topo = (screen.height - altura)/2;

 // Abre a nova janela
 minhaJanela = window.open(pagina,'','height=' + altura + ', width=' + largura + ', top=' + topo + ', left=' + esquerda);
}
-->
</script>
</head>

<body>
<a href="#" onclick="javascript:abrirJanela('http://www.google.com.br', 400, 700);">Google</a><br /><a href="#" onclick="javascript:abrirJanela('http://www.uebihost.com.br', 600, 450);">Serviço de Hospedagem de Sites</a>
</body>
</html>

Espero que este post seja útil e sirva como referência para futuras dúvidas a respeito deste método que é bem útil. Grande abraço!

Sou bacharel em Sistemas de Informação pela Estácio de Sá (Alagoas), especialista em Gestão Estratégica da Tecnologia da Informação pela Univ. Gama Filho (UGF) e pós-graduando em Gestão da Segurança da Informação pela Univ. do Sul de Santa Catarina (UNISUL).
Certificações que possuo: CompTIA Security+, EXIN EHF, MCSO, MCRM, ITIL v3.
Tenho interesse por todas as áreas da informática, mas em especial em Gestão e Governança de TI, Segurança da Informação, Ethical Hacking e Perícia Forense.

4 Responses to “Abrindo uma página ou foto em janela pop-up (Método window.open)”

  1. radio Allis disse:

    Venho agradecer o Código, funciona muito bem, 5 estrelas.. Muito obrigado e parabéns ao site.

    visitem o meu site radio, canais tv, noticias etc etc, link http://radioallis.blogspot.pt

  2. sansao hengler disse:

    show

  3. Smithe6 disse:

    permethrin toxicity in cats bessant akdedfkafdagckba

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Quer ficar atualizado?

Inscreva-se em minha newsletter e seja notificado quando eu publicar novos artigos de graça!