Pular para o conteúdo principal

Adicionar Reset de JavaScript

Última atualização em 24 de mar. de 20261 min de leitura
Índice

Em resumo​

Podes usar a função Add JavaScript Reset para remover código JavaScript que adicionaste. Esta função é especialmente útil para Single Page Applications (SPAs), quando a aplicação não força um novo carregamento de página ao mudar entre páginas diferentes. Consequentemente, as alterações de JavaScript permanecem visíveis na nova página, mesmo que o targeting da experiência já não se aplique. A função de reset de JavaScript é executada imediatamente antes da mudança para a nova página.

Editor Varify com o menu de código aberto, uma seta em «JavaScript Reset» e a caixa de diálogo vazia «Add JS Reset»

Exemplo de aplicação para JavaScript Reset​

Um banner é criado usando JavaScript e deve ser entregue numa página específica. Quando a página é alterada, ele continua a ser entregue, apesar do facto de o targeting na página não se aplicar.

É utilizado o seguinte código JavaScript:

window.varify?.helpers?.waitFor('main', (main) => {
  if (!main || document.querySelector('.demo-banner')) return;

  const css = `.demo-banner{box-sizing:border-box;max-width:800px;margin:12px auto;padding:12px 40px 12px 12px;background:#f33;color:#fff;border-radius:6px;font:14px/1.4 system-ui,sans-serif;position:relative}
    .demo-banner .close{position:absolute;top:6px;right:8px;border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer;line-height:1}
    .demo-banner a{color:#fff;text-decoration:underline}`;
  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);

  const html = `
    <div class="demo-banner" role="region" aria-label="Demo Banner">
      <button class="close" aria-label="Close">×</button>
      <strong>Dummy Banner</strong> — Placeholder text. <a href="#">Learn more</a>
    </div>`;
  main.insertAdjacentHTML('beforebegin', html);

  const banner = document.querySelector('.demo-banner');
  banner.querySelector('.close').addEventListener('click', () => banner.remove());
});

Com o seguinte código JavaScript reset podes garantir que o banner é removido antes da mudança de página:

const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');

[...elementsToRemove].forEach(element => element.remove());
Nesta página