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!
Diego Macêdo
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: EC-Council CEH, CompTIA (Security+, CySA+ e Pentest+), EXIN (EHF e ISO 27001), 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 e Ethical Hacking.