Zum Hauptinhalt springen

JavaScript Reset hinzufügen

Zuletzt aktualisiert am 24. März 20261 Min. Lesezeit
Inhaltsverzeichnis

Kurz gefasst​

Du kannst die Funktion Add JavaScript Reset verwenden, um JavaScript-Code zu entfernen, den du hinzugefügt hast. Diese Funktion ist besonders nützlich für Single Page Applications (SPAs), wenn die Anwendung beim Wechsel zwischen verschiedenen Seiten keinen neuen Seitenaufruf erzwingt. Dementsprechend bleiben JavaScript-Änderungen auf der neuen Seite sichtbar, auch wenn das Targeting des Experiments nicht mehr zutrifft. Die JavaScript-Reset-Funktion wird unmittelbar vor dem Wechsel zur neuen Seite ausgeführt.

Varify-Editor mit geöffnetem Code-Menü, ein Pfeil bei „JavaScript Reset“ und dem leeren Dialog „Add JS Reset“

Anwendungsbeispiel für JavaScript Reset​

Ein Banner wird mittels JavaScript erstellt und soll auf einer bestimmten Seite ausgeliefert werden. Beim Seitenwechsel wird es weiterhin ausgeliefert, obwohl das Targeting auf der Seite nicht mehr zutrifft.

Der folgende JavaScript-Code wird verwendet:

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 dem folgenden JavaScript Reset Code kannst du sicherstellen, dass das Banner vor dem Seitenwechsel entfernt wird:

const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');

[...elementsToRemove].forEach(element => element.remove());
Auf dieser Seite