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

image_pdfimage_print

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). Tenho interesse por todas as áreas da informática, mas em especial em Gestão, Segurança da Informação, Ethical Hacking e Perícia Forense. Sempre disposto a receber sugestões de assuntos para criar uma postagem.

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

  1. sansao hengler disse:

    show

  2. 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!