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.
Esempio di applicazione per JavaScript Reset
Un banner viene creato con JavaScript e deve essere consegnato su una pagina specifica. Quando la pagina viene cambiata, il banner viene comunque consegnato, nonostante il targeting della pagina non sia più applicabile.
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());
});
È possibile utilizzare il seguente codice di ripristino JavaScript per garantire che il banner venga rimosso prima del cambio di pagina:
const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');
[...elementsToRemove].forEach(element => element.remove());