Obtenção de dimensões de elementos DOM

Em JavaScript, para recuperar as dimensões de elementos da página, utilize as seguintes propriedades:

// Largura visível do corpo do documento
const larguraCorpo = document.body.clientWidth;
// Altura visível do corpo do documento
const alturaCorpo = document.body.clientHeight;
// Largura incluindo bordas
const larguraComBordas = document.body.offsetWidth;
// Altura incluindo bordas
const alturaComBordas = document.body.offsetHeight;
// Largura total do conteúdo rolável
const larguraTotal = document.body.scrollWidth;
// Altura total do conteúdo rolável
const alturaTotal = document.body.scrollHeight;
// Distância rolada verticalmente
const deslocamentoVertical = document.body.scrollTop;
// Distância rolada horizontalmente
const deslocamentoHorizontal = document.body.scrollLeft;
// Largura visível da viewport (considerando o elemento raiz)
const larguraViewport = document.documentElement.clientWidth;
// Altura visível da viewport
const alturaViewport = document.documentElement.clientHeight;

// Para um elemento específico, por ID:
const meuElemento = document.getElementById('elementoAlvo');
const alturaReal = meuElemento.offsetHeight;
const larguraReal = meuElemento.offsetWidth;
const distanciaEsquerda = meuElemento.offsetLeft;
const distanciaTopo = meuElemento.offsetTop;

Monitoramento do estado de foco da aba do navegador

Para detectar se a aba atual está ativa ou inativa, utilize eventos específicos:

// Listener para mudanças na visibilidade da página
document.addEventListener('visibilitychange', () => {
  const estadoVisibilidade = document.visibilityState;
  if (estadoVisibilidade === 'hidden') {
    console.log('A aba perdeu foco ou foi ocultada.');
  } else {
    console.log('A aba está ativa e visível.');
  }
});

// Alternativa usando eventos de foco da janela
window.addEventListener('focus', () => {
  console.log('A janela ganhou foco.');
});

Impedindo o fechamento acidental da página

Para solicitar confirmação antes do usuário sair da página, intrecepte o evento de descarga:

window.addEventListener('beforeunload', (evento) => {
  // Define uma mensagem personalizada para o diálogo de confirmação
  evento.returnValue = 'Tem certeza de que deseja sair? As alterações não salvas serão perdidas.';
});

Controle programático de janelas do navegador

Utilize métodos do objeto window para gerenciar abas ou janelas:

// Abrir uma nova janela ou aba com uma URL específica
const novaJanela = window.open('https://exemplo.com', '_blank');

// Fechar uma janela aberta por script
// Nota: Isso só funciona se a janela foi aberta via script.
if (novaJanela) {
  novaJanela.close();
}

// Para fechar a janela atual (com redirecionamento para evitar erros)
window.location.href = 'about:blank';
setTimeout(() => {
  window.close();
}, 100);

Comunicação entre contexts via postMessage

A API postMessage permite a troca de dados entre diferentes origens, como entre uma página princiapl e iframes ou janelas abertas:

// Enviando uma mensagem para outro contexto
const contextoDestino = window.open('https://outraorigem.com', '_blank');
if (contextoDestino) {
  const mensagem = { tipo: 'atualizacao', dados: [1, 2, 3] };
  contextoDestino.postMessage(mensagem, 'https://outraorigem.com');
}

// Recebendo mensagens
window.addEventListener('message', (evento) => {
  // Verifique a origem por segurança
  if (evento.origin === 'https://origemconfiavel.com') {
    console.log('Mensagem recebida:', evento.data);
  }
});