Abrindo, Fechando e Posicionando Janelas - JavaScript

A linguagem JavaScript permite o controle programático das janelas do navegador web. Para isso, o objeto window oferece uma série de métodos. Por exemplo, o método open() abre um recurso específico em uma nova janela ou aba do navegador. É importante considerar que tais ações devem ser idealmente iniciadas por uma interação do usuário, como um clique em um botão, pois, caso contrário, os navegadores podem bloquear essas janelas. Vamos definir a seguinte página:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<button onclick="openWindow()">Clique</button>
<script>
function openWindow() {
    window.open("https://microsoft.com");
}
</script>
</body>
</html>

Neste exemplo, a função openWindow() é definida e executada ao clicar no botão. Esta função chama window.open(), passando como primeiro parâmetro o endereço "https://microsoft.com". Ao clicar no botão, a página "https://microsoft.com" será aberta em uma nova aba.

O método open() aceita vários parâmetros:

open();
open(url);
open(url, target);
open(url, target, windowFeatures);

O primeiro parâmetro, url, é o caminho para o recurso. O segundo parâmetro, target, indica onde abrir o recurso. Os valores comuns para o segundo parâmetro são:

_self: abre a página na aba atual.
_blank: aabre a página em uma nova aba ou janela separada.

Por exemplo, para abrir um endereço na mesma aba:

window.open("https://www.programicio.com", "_self");

O terceiro parâmetro permite definir um conjunto de características estilísticas da janela. Cada característica é definida como pares nome=valor, separados por vírgulas. Algumas das características incluem:

popup: indica se a página será aberta em uma janela popup separada. Por exemplo: popup=yes.
width/innerWidth: largura da janela em pixels. Por exemplo: width=640.
height/innerHeight: altura da janela em pixels. Por exemplo: height=480.
left/screenX: coordenada X relativa ao início da tela em pixels. Por exemplo: left=0.
top/screenY: coordenada Y relativa ao início da tela em pixels. Por exemplo: top=0.
location: indica se a barra de endereços será exibida. Por exemplo: location=yes.
menubar: indica se a barra de menus será exibida. Por exemplo: menubar=yes.
scrollbars: indica se a janela terá barras de rolagem. Por exemplo: scrollbars=yes.
status: indica se a barra de status será exibida. Por exemplo: status=yes.
toolbar: indica se a barra de ferramentas será exibida. Por exemplo: toolbar=yes.

Os últimos cinco parâmetros podem receber os valores yes e no, que também podem ser representados como 1 e 0, respectivamente.

Exemplo de uso de vários parâmetros:

window.open("https://www.programicio.com", "_blank", "width=600,height=400,left=500,top=200");

É importante notar que a função retorna uma referência à janela, e com essa referência, podemos controlar a janela.

Também vale ressaltar que através da propriedade opener da janela é possível obter uma referência à janela principal, a partir da qual a atual foi aberta.

Fechando Janelas

A janela pode ser fechada com o método close(). Por exemplo:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <title>Programício</title>
    </head>
    <body>
      <button onclick="openWindow()">Abrir</button>
      <button onclick="closeWindow()">Fechar</button>
      <script>
        let programicioWindow = null;
  
        function openWindow() {
          if (!programicioWindow || programicioWindow.closed) {
            programicioWindow = window.open(
              "https://www.programicio.com",
              "_blank",
              "width=600,height=400,left=500,top=200,popup=yes"
            );
          }
        }
        function closeWindow() {
          programicioWindow?.close();
          programicioWindow = null;
        }
      </script>
    </body>
  </html>

Dois botões são definidos para abrir e fechar a janela. A referência à própria janela é armazenada na variável programicioWindow, que inicialmente é null. Ao pressionar o primeiro botão, a função openWindow() é chamada. Esta função verifica se programicioWindow não é null e se a janela não está fechada (programicioWindow.closed não é falso). Se a janela não estiver aberta, ela será aberta.

Ao pressionar o segundo botão, o método close é chamado no objeto programicioWindow, e a variável é resetada para null.

Controlando a Posição e o Tamanho da Janela

O objeto window fornece uma série de métodos para controlar ou modificar a posição e o tamanho da janela:

moveBy(): move a janela atual do navegador horizontal e verticalmente pela quantidade especificada de pixels. O primeiro parâmetro determina o movimento horizontal, o segundo parâmetro, o movimento vertical.
moveTo(): move a janela atual do navegador para a posição especificada. O primeiro parâmetro define a posição horizontal, o segundo parâmetro, a posição vertical.
resizeBy(): redimensiona a janela atual do navegador horizontal e verticalmente pela quantidade especificada de pixels. O primeiro parâmetro determina o aumento horizontal, o segundo parâmetro, o aumento vertical.
resizeTo(): redimensiona a janela atual do navegador para as dimensões especificadas. O primeiro parâmetro define a largura, o segundo parâmetro, a altura.
scroll(): rola o conteúdo da janela até a posição especificada. O primeiro parâmetro indica a posição horizontal, o segundo parâmetro, a posição vertical.
scrollBy(): rola o conteúdo da janela pelo fator especificado. O primeiro parâmetro determina o fator de rolagem horizontal, o segundo parâmetro, o fator de rolagem vertical.
scrollTo(): rola o conteúdo da janela até a posição especificada. O primeiro parâmetro indica a posição horizontal, o segundo parâmetro, a posição vertical.

Exemplos de controle da posição e do tamanho da janela:

// Move a janela do navegador 200 pixels horizontalmente e 100 pixels verticalmente
window.moveBy(200, 100);
// Posiciona a janela do navegador na posição com coordenadas (200, 150)
window.moveTo(200, 150);
// Aumenta a janela do navegador 200 pixels na largura e 100 pixels na altura
window.resizeBy(200, 100);
// Reduz a janela do navegador 200 pixels na largura e 100 pixels na altura
window.resizeBy(-200, -100);
// Rola o conteúdo da janela 100 pixels horizontalmente e 200 pixels verticalmente
window.scrollBy(100, 200);
// Rola o conteúdo do navegador até a posição (100, 200)
window.scrollTo(100, 200);

No entanto, vale ressaltar que podem haver restrições de posicionamento e redimensionamento de janelas no nível do navegador, especialmente se as janelas carregarem recursos de diferentes domínios.

Exemplo de uso do método moveTo() para mover a janela para uma nova posição:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<button onclick="openWindow()">Abrir</button>
<button onclick="moveWindow()">Mover</button>
<script>
let testWindow = null;

// Abre a janela
function openWindow() {
    testWindow = window.open("test.html", "_blank", "width=600,height=400,left=200,top=200");
}
// Move a janela
function moveWindow() {
    testWindow.moveTo(500,400);
}
</script>
</body>
</html>