URL'yi JavaScript ile Dinamik Olarak Değiştirme
Modern web uygulamalarıyla çalışırken, sayfanın yeniden yüklenmesini tetiklemeden URL'yi değiştirmeniz gerektiğini görebilirsiniz. Bu, özellikle kusursuz bir kullanıcı deneyimi oluşturmak için yararlı olabilir.
Bu kılavuzda, karma (#) simgesinden önceki kısma erişmenizi sağlayan teknikler de dahil olmak üzere, URL'nin alan adından sonraki kısmını değiştirme yöntemlerini inceleyeceğiz. Bu, istenen URL değişikliğini gerçekleştirirken alanlar arası politikalara uyumu sağlar.
| Emretmek | Tanım |
|---|---|
| history.pushState() | Sayfayı yeniden yüklemeden URL'yi değiştirerek tarayıcının oturum geçmişi yığınına yeni bir giriş ekler. |
| window.history.pushState() | Geçerli geçmiş girişini yeni durum verileri ve yeni bir URL ile günceller. |
| window.location.hash | URL'nin karma sembolünü (#) takip eden bağlantı kısmını alır veya ayarlar. |
| function changeURL(newPath) | Geçmiş API'sini kullanarak URL yolunu güncelleyen bir işlevi tanımlar. |
| function updateHash(newHash) | URL karmasını güncelleyen bir işlevi tanımlar. |
JavaScript'te URL Değişikliğinin Ayrıntılı Açıklaması
İlk komut dosyası şunu kullanır: history.pushState() History API'nin bir parçası olan yöntem. Bu komut, geliştiricilerin, sayfayı yeniden yüklemeden, adres çubuğunda görüntülenen URL'yi etkili bir şekilde değiştirerek, tarayıcının oturum geçmişi yığınına yeni bir giriş eklemesine olanak tanır. Senaryoda, const newURL = "/page2.php"; yeni yolu belirler ve history.pushState(null, "", newURL); URL'yi bu yeni yola değiştirir. Sarılarak history.pushState gibi bir fonksiyondaki komut function changeURL(newPath), URL'yi gerektiği gibi dinamik olarak güncelleyebiliriz. Bu teknik, içeriğin tüm sayfayı yeniden yüklemeden dinamik olarak değiştiği tek sayfalı uygulamalar (SPA'lar) için özellikle kullanışlıdır.
İkinci komut dosyası, kullanarak URL karma değerini değiştirmeyi ele alır. window.location.hash. Bu özellik, URL'nin karma sembolünü (#) takip eden bağlantı kısmını alır veya ayarlar. Ayarlayarak const hashValue = "newSection"; Ve window.location.hash = hashValue;, URL karması sayfayı yeniden yüklemeden #newSection olarak değişir. Bu yaklaşım, aynı sayfada gezinmek veya bir belgenin belirli bölümlerine bağlantı vermek için kullanışlıdır. Ek olarak, işlev function updateHash(newHash) Bu işlevselliği kapsülleyerek URL'nin karma kısmını dinamik olarak değiştirmeyi kolaylaştırır. Her iki komut dosyası da URL'yi değiştirmenin ve gereksiz sayfa yeniden yüklemelerini önleyerek kullanıcı deneyimini iyileştirmenin kusursuz yollarını sağlar.
URL'yi Yeniden Yüklemeden Değiştirmek için Geçmiş API'sini Kullanma
Geçmiş API'sı ile JavaScript
const newURL = "/page2.php";history.pushState(null, "", newURL);// This changes the URL to /page2.php without reloading the pagefunction changeURL(newPath) {window.history.pushState({}, "", newPath);}// Example usagechangeURL("/page2.php");
Yeniden Yüklemeden URL Karmasını Değiştirme
Karmayı değiştirmek için JavaScript
const hashValue = "newSection";window.location.hash = hashValue;// This changes the URL hash to #newSectionfunction updateHash(newHash) {window.location.hash = newHash;}// Example usageupdateHash("newSection");
URL'yi Yeniden Yüklemeden Değiştirmek İçin Ek Yöntemleri Keşfetme
Sayfayı yeniden yüklemeden URL'yi değiştirmenin başka bir yönü de replaceState() Geçmiş API'sinden yöntem. Sırasında pushState() yeni bir geçmiş girişi ekler, replaceState() geçerli geçmiş girişini değiştirir. Bu, özellikle kullanıcının geçmişini birden çok durumla karıştırmadan URL'yi değiştirmek istediğinizde yararlı olabilir. Örneğin, içeriğin sık sık değiştiği tek sayfalı bir uygulamanız varsa, her değişikliği geçmişe eklemeden URL'yi mevcut durumu yansıtacak şekilde güncellemek isteyebilirsiniz. Bu, geri düğmesinin işlevselliğini temiz ve kullanıcı dostu tutar.
Kullanmak replaceState()buna benzer bir fonksiyon yazabilirsiniz changeURL() ama onun yerine ara history.replaceState() içinde. Örneğin, function replaceURL(newPath) kullanabilir history.replaceState(null, "", newPath); URL'yi güncellemek için. Bu teknik, gereksiz geçmiş girişleri oluşturmadan URL'yi uygulamanın durumuyla senkronize tutarak kullanıcı deneyimini geliştirmek açısından değerlidir. Ayrıca, özellikle dinamik web uygulamalarında tarayıcının geçmişini yönetmenin daha etkili bir yolunu sunar.
URL'leri Yeniden Yüklemeden Değiştirme Hakkında Sık Sorulan Sorular
- Arasındaki fark nedir pushState() Ve replaceState()?
- pushState() oturum geçmişi yığınına yeni bir giriş eklerken replaceState() geçerli geçmiş girişini değiştirir.
- Sayfayı yeniden yüklemeden URL karma değerini değiştirebilir miyim?
- Evet kullanarak window.location.hash, sayfayı yeniden yüklemeden URL karmasını değiştirebilirsiniz.
- URL'nin yalnızca sorgu parametrelerini değiştirmek mümkün mü?
- Evet, sorgu parametrelerini kullanarak güncelleyebilirsiniz. pushState() veya replaceState() sayfayı yeniden yüklemeden yöntemler.
- URL'yi şu şekilde değiştirir: pushState() geri düğmesini etkiler mi?
- Evet, her çağrı pushState() yeni bir geçmiş girişi oluşturur, böylece geri düğmesi bu durumlar arasında gezinir.
- Bu yöntemleri tüm tarayıcılarda kullanabilir miyim?
- Çoğu modern tarayıcı, Geçmiş API'sini destekler. pushState() Ve replaceState()ancak her zaman uyumluluğu kontrol edin.
- Kullanırken popstate olaylarını nasıl ele alırım? pushState()?
- için dinleyebilirsiniz popstate Etkin geçmiş girişindeki değişiklikleri işlemek ve kullanıcı arayüzünü buna göre güncellemek için olay.
- URL biçimi kullanılırken yanlışsa ne olur? pushState()?
- URL biçimi yanlışsa pushState() bir hata verecektir; bu nedenle URL'lerinizin doğru şekilde biçimlendirildiğinden emin olun.
Konuyu Bitirmek
Sayfayı JavaScript'te yeniden yüklemeden URL'yi değiştirmek, daha sorunsuz gezinme sağlayarak ve gereksiz sayfa yeniden yüklemelerini önleyerek kullanıcı deneyimini büyük ölçüde iyileştirebilir. Geçmiş API'lerini kullanma pushState() Ve replaceState() yöntemleri, geliştiricilerin URL'yi dinamik olarak güncellemesine olanak tanır ve tarayıcının geçmişini karmaşıklaştırmadan uygulama durumunu senkronize tutar. Ek olarak, URL karma değerini değiştirmek sayfa içinde verimli gezinme sağlayabilir. Bu teknikleri anlamak ve uygulamak, modern, duyarlı web uygulamaları geliştirmek için çok önemlidir.