JavaScript - 9. Abrindo janelas

Para abrir uma nova janela, uma nova aba através de javascript, utilizamos o método window.open(), e com ele, temos alguns parâmetros como:

window.open(endereço, nome da janela, configurações);

Em endereço, temos a URL, apesar do campo ser opcional, pois podemos abrir uma janela que irá apontar para about:blank, ou ser controlada por javascript.

Nome da janela, é o mesmo que usado nos elementos target, significa que você dará um nome para esta janela que será aberta, e links com <a href="" target="blabla">link</a> serão apontados para serem abertos diretamente na janela que abriu diretamente, caso esta janela, conforme este exemplo, se chame "blabla".

Em nome da janela, também temos alguns escopos padrão, como:

_blank = A URL será aberta em uma nova janela ou nova aba. Este é também o modo padrão.
_parent = A URL será carregada dentro de algum frame que já está na página.
_self = A URL será carregada na mesma página que você está, ou seja, não será aberto uma nova janela.
_top = A URL será carregada sobre qualquer frameset ou iframe que possa haver na página.

Configurações, possuem vários critérios para como a janela aberta deve se comportar, e isto pode mudar conforme o tipo de navegador utilizado, mas os mais comuns são width, height, top e left. Os valores devem ser separados por vírgula, e cada valor deve ser atribuído com sinal de igual, como se fosse uma variável dentro de uma string. Veja um exemplo:

window.open("https://tutsplus.com.br/","","width=600,height=400,top=40,left=40");

Isto fará abrir uma janela contendo o site em uma janela com 600px de largura, com 400px de altura, posicionados na largura e altura de 40px da tela do usuário.

Você pode continuar a controlar os elementos dentro da janela após aberta se utilizar alguma varável para controlar esta nova janela, como no exemplo:

var janela = window.open("https://tutsplus.com.br/","","width=600,height=400,top=40,left=40");
janela.document.writeln("Olá mundo!");

Com isto, não será aberta uma janela contendo a URL, mas uma janela contendo a URL "about:blank" contendo o conteúdo "Olá mundo!", ou seja, todo o documento será acessível por javascript a partir da janela que executou o script.

Outro uso interessante para uma janela criada por uma variável, é conseguir via javascript fechá-la, como por exemplo (seguindo o exemplo da variável do exemplo anterior):

janela.close();