Aller au contenu principal

Ajouter la réinitialisation JavaScript

Dernière mise à jour le 24 mars 20261 min de lecture
Table des matières

En bref​

Tu peux utiliser la fonction Add JavaScript Reset pour supprimer le code JavaScript que tu as ajouté. Cette fonction est particulièrement utile pour les Single Page Applications (SPA), lorsque l'application ne force pas un nouveau chargement de page lors du passage d'une page à une autre. Par conséquent, les modifications JavaScript restent visibles sur la nouvelle page, même si le ciblage de l'expérience ne s'applique plus. La fonction de réinitialisation JavaScript est exécutée juste avant le passage à la nouvelle page.

Éditeur Varify avec le menu de code ouvert, une flèche pointant vers « JavaScript Reset » et la boîte de dialogue vide « Add JS Reset »

Exemple d'application pour JavaScript Reset​

Une bannière est créée à l'aide de JavaScript et doit être diffusée sur une page spécifique. Lorsque la page change, elle est toujours diffusée, bien que le ciblage sur la page ne s'applique pas.

Le code JavaScript suivant est utilisé :

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());
});

Avec le code JavaScript reset suivant, tu peux t'assurer que la bannière est supprimée avant le changement de page :

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

[...elementsToRemove].forEach(element => element.remove());
Sur cette page