pushState ve replaceState
Tam sayfa yeniden yüklemesi olmadan tarayıcı URL'sini güncelleyin
pushState ve replaceState, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Geçmiş Uygulama Programlama Arayüzü
Geçmiş uygulama programlama arayüzü, tam bir gezinmeyi tetiklemeden adres çubuğunda gösterilen adresi değiştirmeyi sağlar. İstemci tarafı oluşturmayla birlikte kullanıldığında, yer imlerine eklenebilen adreslerden ödün vermeden yerel hissettiren Tek Sayfalı Uygulamaları mümkün kılar.
pushState
history.pushState(state, "", url), tarayıcı geçmişine yeni bir kayıt ekler. Adres çubuğundaki adres hemen güncellenir; ağ isteği yapılmaz. Kullanıcı, tarayıcının geri düğmesiyle önceki kayda dönebilir.
history.pushState({ view: "settings" }, "", "/settings");state Bağımsız Değişkeni
İlk bağımsız değişken, kayda eklenen isteğe bağlı serileştirilebilir verilerdir. Bu verileri daha sonra history.state aracılığıyla veya popstate olaylarında okuyabilirsiniz. Kullanıcı arayüzü durumunu (hangi sekmenin açık olduğu, kaydırma konumu) aktarmak için kullanın; böylece geri gidildiğinde tam olarak aynı görünüm geri yüklenebilir.
Başlık Argümanı
İkinci argüman, geçmiş kaydının başlığıdır. Uygulamada tüm modern tarayıcılar bunu yok sayar — başlığı değiştirmek için doğrudan document.title = "..." ayarlayın. Geleneksel olarak boş bir dize geçin; bunun hiçbir etkisi yoktur.
url Argümanı
Üçüncü argüman yeni adrestir. Göreli adresler mevcut sayfaya göre çözümlenir; yeni adres aynı kaynaklı olmalıdır (farklı kaynaklı bir adres kullanmak SecurityError oluşturur). Tarayıcılar adresi getirmez — pushState yalnızca adres çubuğunu ve geçmişi günceller.
replaceState
history.replaceState(state, "", url), yeni bir geçmiş kaydı eklemek yerine mevcut geçmiş kaydını değiştirir. Geri gezinmeye yeni bir adım eklemeden adresi güncellemek istediğinizde kullanın (örneğin bir filtre sorgu dizesini güncellerken).
// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);pushState Kullanım Alanları
SPA route değişiklikleri (tam sayfa yenilemesi olmadan bir gezinme bağlantısına tıklama), modal pencere açılması (böylece geri düğmesi modal pencereyi kapatır) ve sihirbazdaki adım geçişleri. Her anlamlı durum yeni bir geçmiş kaydı olmalıdır; böylece geri düğmesi kullanıcıların beklediği şekilde çalışır.
replaceState Kullanım Alanları
Geçmişi gereksiz kayıtlarla doldurmaması gereken filtreleme, sıralama ve sayfalama güncellemeleri; formun bir bölümünün tamamlanmasından sonra yönlendirme; gezinilebilir kayıtlar oluşturmadan izleme parametrelerini güncelleme. Kullanıcı geri düğmesine bastığında bu "ara" durumları atlar.
pushState Sonrasında Görünümü Güncelleme
pushState yalnızca adresi değiştirir — kodunuz ayrıca DOM'u güncellemelidir. Uygulanacak sıra şudur: yeni içeriği oluşturun, ardından pushState çağrısı yapın. Bu ikisi birlikte SPA deneyimini oluşturur.
function navigate(path) {
renderPage(path);
history.pushState(null, "", path);
window.scrollTo(0, 0);
}Başlık ve Üstveri Güncellemeleri
Gezinmeden sonra document.title ve og:title meta etiketlerini güncelleyin; böylece sosyal medya paylaşımları ve tarayıcı sekmesi başlıkları mevcut görünümü yansıtır. Bunu unutmak, sonraki paylaşımlarda özgün başlığın kalmasına neden olur — SPA'lerde sık görülen, ancak fark edilmesi zor bir hatadır.
Sayfa Yüklenirken İlk pushState
Kullanıcı gezinmeye başlamadan önce pushState çağırmak ilk kaydın üzerine yazar. Sayfanın ilk kaydına durum eklemek için replaceState kullanın — geçmişin derinliğini değiştirmeden durumu ekler.
Güvenlik Kısıtlaması
pushState adresleri aynı kaynaklı olmalıdır. https://evil.com adresine pushState uygulamaya çalışmak SecurityError oluşturur. Bu, kullanıcıların farklı bir sitede olduklarını düşünmesine yol açacak şekilde adres çubuğunun sahte gösterilmesini önler.
Bilgi Kontrolü
history.replaceState, history.pushState'in yapmadığı neyi yapar?
Özet
pushState, sayfa yenilemesi olmadan yeni bir geçmiş kaydı ekler — SPA yönlendirmesinin temelidir. replaceState, görsel amaçlı adres değişiklikleri için mevcut kaydı yerinde günceller. Her ikisi de aynı kaynaklı adresler gerektirir ve başlık argümanını yok sayar. DOM'u her zaman ayrıca güncelleyin; gezinmeden sonra document.title ve meta etiketlerini güncellemeyi unutmayın.
Sıkça Sorulan Sorular
“pushState ve replaceState” dersi ücretsiz mi?
Evet — “pushState ve replaceState” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“pushState ve replaceState” dersinde ne öğreneceğim?
Tam sayfa yeniden yüklemesi olmadan tarayıcı URL'sini güncelleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“pushState ve replaceState” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- pushState ve replaceState
- popstate Olayı
- Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması
- Navigation API: Modern Tarayıcılar