Aggiungere JavaScript Reset
Breve e dolce
È possibile utilizzare la funzione Add JavaScript Reset per rimuovere il codice JavaScript aggiunto. Questa funzione è particolarmente utile per le applicazioni a pagina singola (SPA), se l'applicazione non forza il caricamento di una nuova pagina quando si passa da una pagina all'altra. Di conseguenza, le modifiche JavaScript rimangono visibili nella nuova pagina, anche se il target dell'esperimento non è più applicabile. La funzione di ripristino di JavaScript viene eseguita poco prima del passaggio alla nuova pagina.
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());