Sayfayı Yenilemeden URL’de ki hastagi değiştirme

Sayfayı Yenilemeden URL’de ki hastagi değiştirme

Bir proje içerisinde tab kullanımı vardı, talep doğrultusunda ilk açılışta yer yer sekmelerin değişmesi gerekiyordu.

const url = new URL(window.location.href);
url.searchParams.set('param1', 'val1');
url.searchParams.delete('param2');
window.history.replaceState(null, null, url); // veya pushState

Stack over flow üzerinde bulduğum cevabıda buraya kendime not almak için bırakıyorum. Detayları merak edenler yorum olarak yazabilirler.

const url = new URL(window.location.href);: URL sınıfının bir örneğini oluşturarak mevcut sayfanın URL’sini alır ve url değişkenine atar. Bu, tarayıcıdaki mevcut sayfanın URL’sini temsil eden bir URL nesnesi elde etmenizi sağlar.

url.searchParams.set('param1', 'val1');: searchParams özelliği, URL’nin sorgu parametrelerine erişmek için kullanılır. Bu satır, param1 adında bir sorgu parametresi ekler ve değerini 'val1' olarak ayarlar. Eğer param1 zaten varsa, değeri güncellenir.

url.searchParams.delete('param2');: Bu satır, param2 adında bir sorgu parametresini kaldırır. Eğer param2 yoksa, bu işlem bir değişiklik yapmaz.

window.history.replaceState(null, null, url);: Bu satır, tarayıcının geçmişini günceller. replaceState yöntemi, tarayıcının geçmişine yeni bir durum ekler ve mevcut sayfanın URL’sini değiştirir. İlk iki parametre state ve title olup, bu örnekte null olarak belirtilmiştir çünkü bu parametrelerin şu anda kullanılmasına gerek yoktur. Üçüncü parametre url‘dir ve güncellenmiş URL’yi temsil eden url değişkenini içerir.

Bu kod parçası, mevcut sayfanın URL’sindeki sorgu parametrelerini değiştirir ve bu değişiklikleri tarayıcının geçmişine kaydeder. Sonuç olarak, sayfa URL’si yeni parametrelerle güncellenmiş ve tarayıcının geri düğmesiyle geri gidildiğinde bu güncellemeleri içerecektir.

Paylaş :

Bu gönderiyi paylaş

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.


Verified by MonsterInsights