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.
Anwendungsbeispiel zu JavaScript Reset
Per JavaScript wird ein Banner erstellt und dieser soll auf einer spezifischen Seite ausgeliefert werden. Bei Seitenwechsel wird dieser weiterhin ausgeliefert, trotz dass das Targeting auf der Seite nicht zutrifft.
Folgender JavaScript Code wird genutzt:
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());
});
Mit folgendem JavaScript Reset Code kannst du sicherstellen, dass der Banner vor Seitenwechsel wieder entfernt wird:
const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');
[...elementsToRemove].forEach(element => element.remove());