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=pixels – Determina 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!