Ana içeriğe geç

JavaScript Reset Ekle

Son güncelleme: 24 Mar 20261 dk okuma süresi

Kısaca​

Eklediğiniz JavaScript kodunu kaldırmak için Add JavaScript Reset fonksiyonunu kullanabilirsiniz. Bu fonksiyon, özellikle Tek Sayfa Uygulamaları (SPA) için kullanışlıdır; çünkü uygulama, farklı sayfalar arasında geçiş yaparken yeni bir sayfa yüklemesi zorlamaz. Buna bağlı olarak, deneyin hedeflemesi artık geçerli olmasa bile JavaScript değişiklikleri yeni sayfada görünür kalır. JavaScript reset fonksiyonu, yeni sayfaya geçmeden hemen önce çalıştırılır.

Kod menüsü açık, „JavaScript Reset“ üzerinde bir ok ve boş „Add JS Reset“ diyaloğu bulunan Varify editörü

JavaScript Reset için uygulama örneği​

JavaScript kullanılarak bir banner oluşturulur ve belirli bir sayfada gösterilmesi istenir. Sayfa değiştirildiğinde, sayfadaki targeting geçerli olmamasına rağmen banner hâlâ gösterilmeye devam eder.

Aşağıdaki JavaScript kodu kullanılır:

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());
});

Aşağıdaki JavaScript reset kodu ile sayfa değişiminden önce banner'ın kaldırılmasını sağlayabilirsin:

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

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