Ajouter JavaScript Réinitialiser
En bref
La fonction Add JavaScript Reset te permet de supprimer le code JavaScript que tu as ajouté. Cette fonction est particulièrement utile pour les applications à page unique (SPA), lorsque l'application ne force pas le chargement d'une nouvelle page lors du passage d'une page à l'autre. En conséquence, les modifications JavaScript restent visibles sur la nouvelle page, même si le ciblage de l'expérience ne s'applique plus. La fonction JavaScript Reset est exécutée juste avant le passage à la nouvelle page.
Exemple d'utilisation de JavaScript Reset
Une bannière est créée par JavaScript et doit être diffusée sur une page spécifique. En cas de changement de page, la bannière continue d'être diffusée malgré le fait que le ciblage ne s'applique pas à la page.
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 soit retirée avant le changement de page :
const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');
[...elementsToRemove].forEach(element => element.remove());