13.02.2025

Atualizando a Página Principal ao Fechar uma Janela Popup em JavaScript

Resposta Rápida

Se você precisa atualizar a página principal após fechar uma janela popup, pode usar o método JavaScript window.open(), que funciona em conjunto com o evento window.onunload. Abaixo está um exemplo de código que implementa isso:

function abrirPopupEAtualizarPai() { 
  var popup = window.open('popup.html', 'Popup', 'width=600,height=600');
  popup.onunload = function() {
    if(!popup.closed) {
      window.opener.location.reload(); // Sempre comece do zero
    }
  };
}

Chame a função abrirPopupEAtualizarPai() em seu código onde necessário, como, por exemplo, durante o clique de um botão na página principal, assim a página principal será atualizada automaticamente quando a janela popup for fechada.

Técnicas Avançadas para Gerenciar a Lógica de Popup

Para controlar os estados das janelas popup e melhorar a interação com elas, use o evento window.onunload com cuidado, pois seu comportamento pode diferir entre navegadores. Torne suas interações mais inteligentes e elegantes com window.onbeforeunload. Lembre-se de considerar os bloqueadores de popup que podem estar em uso.

Detecção Confiável do Fechamento da Janela

O evento onunload não funciona de forma confiável em todos os navegadores. Uma abordagem mais confiável é utilizar o seguinte método:

function abrirPopupEAtualizarPai() {
  var popup = window.open('popup.html', 'Popup', 'width=600,height=600'),
      intervalo = setInterval(function() {
        if (popup.closed) {
          clearInterval(intervalo);
          window.location.reload(); // Um novo começo com um recarregamento!
        }
      }, 100); // Ajuste a velocidade de verificação conforme sua necessidade
}

Uso Responsável de Popups

Projete as interações com popups para que a experiência do usuário seja priorizada. Coloque um botão dentro do popup para disparar o recarregamento ou a salvaguarda de dados para atualizar a página:

function atualizarPaiEFecharPopup() {
  window.opener.location.reload(); // Vamos atualizar a página!
  window.close(); // Adeus, popup!
}

Ações equivalentes usando jQuery:

$('#botaoSalvar').click(function() {
  window.opener.location.reload();
  window.close();
});

Adesão à Política de Mesma Origem

Os navegadores impõem rigorosamente a Política de Mesma Origem (Same-Origin Policy - SOP) por razões de segurança. Certifique-se de que a URL da página pai e a do popup sejam correspondentes, a menos que mecanismos seguros de comunicação entre domínios estejam configurados via postMessage().

Experiência do Usuário ao Atualizar a Página

Atualizar a página através de um popup pode estar fora da visão do usuário. Preserve os dados e o estado do usuário; isso é fundamental. Após mudanças significativas no popup, execute um recarregamento completo com window.opener.location.reload(true).

Ações Temporizadas: Interação do Usuário Primeiro

Dê aos usuários um momento antes de atualizar a página:

window.onbeforeunload = function() {
  setTimeout(function() {
    window.opener.location.reload();
  }, 1000); // Uma pausa para respirar
};

Teste sempre sua solução em diversos navegadores e considere as possíveis diferenças no tratamento dos eventos onunload e window.close().

Visualização

Você pode pensar na janela popup como uma porta (🚪), e a página principal como uma casa (🏠):

🏠 Abra a porta (🚪): entrando na janela popup

Ações dentro da janela popup:

🚪 ➡️ 🎨 Fazendo alterações dentro do popup

Quando terminamos, voltamos para casa, transformados e renovados:

🚪 🔒 Atualizando a casa (🏠): a página principal é recarregada

Essa metáfora ajuda a visualizar a interação entre a janela popup e a página principal.

Dicas para Otimizar a Interação com Popups

Ajustando o Tamanho do Popup

Preste atenção especial ao tamanho e à posição do popup, já que esses parâmetros afetam diretamente o conforto do usuário no site. Parâmetros como width, height, left e top ajudam a configurá-lo de forma eficaz.

Capturando a Atenção do Usuário

Imediatamente após abrir o popup, utilize popup.focus() para garantir que ele capture a atenção do usuário, evitando cliques acidentais na página principal.

Fechando o Popup Programaticamente a Partir da Página Principal

Se você precisar fechar o popup a partir da página pai:

var refPopup;

function abrirPopup() {
  refPopup = window.open(...);
}

function fecharPopup() {
  if (refPopup) {
    refPopup.close();
    refPopup = null; // O capítulo se fecha!
  }
}

Mudando para Diálogos Modais

Se os popups não forem satisfatórios por qualquer motivo, considere substituí-los por diálogos modais criados com HTML, CSS e JavaScript. Esses elementos se integram mais naturalmente à estrutura DOM da página e têm menor probabilidade de serem bloqueados pelos navegadores.

Recursos Úteis

1. Método Window.open() - Web API | MDN — Informações sobre o método open() em JavaScript.
2. Método Window.postMessage() - Web API | MDN — Descrição da comunicação entre domínios usando postMessage().
3. Como criar um modal com CSS e JavaScript — Um tutorial sobre como criar diálogos modais.
4. Janelas popup e métodos de gerenciamento de janelas — Várias abordagens para usar popups e métodos em JavaScript.
5. Exibindo modais: recomendações | CSS-Tricks — Recomendações para estilizar diálogos modais.
6. Widget de Diálogo | Documentação do jQuery UI — Usando o método de diálogo no jQuery UI para diálogos modais.
7. Can I use... Banco de dados de suporte para HTML5, CSS3 e mais — Verifique o suporte do navegador para o método postMessage.

Video

Navigation