Aggiungi JavaScript Reset
In breve
Puoi usare la funzione Add JavaScript Reset per rimuovere il codice JavaScript che hai aggiunto. Questa funzione è particolarmente utile per le Single Page Application (SPA), quando l'applicazione non forza un nuovo caricamento della pagina passando da una pagina all'altra. Di conseguenza, le modifiche JavaScript restano visibili sulla nuova pagina, anche se il targeting dell'esperimento non si applica più. La funzione JavaScript reset viene eseguita subito prima del passaggio alla nuova pagina.
Esempio applicativo per JavaScript Reset
Viene creato un banner tramite JavaScript, che deve essere erogato su una pagina specifica. Quando la pagina viene cambiata, il banner viene comunque erogato, nonostante il targeting sulla pagina non sia più valido.
Viene utilizzato il seguente codice 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());
});
Con il seguente codice JavaScript reset puoi assicurarti che il banner venga rimosso prima del cambio pagina:
const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');
[...elementsToRemove].forEach(element => element.remove());