Bu makale, JavaScript kullanarak web sayfasını yeniden yüklemeden URL'yi değiştirme yöntemlerini açıklayacaktır.
Sayfayı Yeniden Yüklemeden JavaScript'te URL Nasıl Değiştirilir/Değiştirilir?
Web sayfasını yeniden yüklemeden URL'yi değiştirmek için aşağıdaki önceden tanımlanmış JavaScript yöntemini kullanın:
Yöntem 1: “pushState()” Yöntemini Kullanarak Sayfayı Yeniden Yüklemeden JavaScript'teki URL'yi değiştirin
Web sayfasını yeniden yüklemeden URL'yi değiştirmek için ' pushState() ' yöntem. “” öğesinin bir özelliği veya önceden tanımlanmış yöntemidir. geçmiş Nesne ”, sayfada gezinmeden veya sayfayı yenilemeden tarayıcı geçmişini değiştirmeye izin verir. Yalnızca geçmiş yığınını ekler veya değiştirir ve yeni bir sayfa yüklemez. Bu yaklaşımı kullanarak, tarayıcının geçmiş yığınına yeni bir giriş ekleyerek sayfalar arasında geçiş yapabilirsiniz.
Sözdizimi
'pushState()' yöntemi için verilen sözdizimini izleyin:
pencere. tarih . pushState ( durum , başlık , url ) ;
Burada:
- “ durum ” yeni geçmiş girişini temsil eder.
- “ başlık ”, tarayıcının başlık çubuğunda gösterilebilen özel metindir.
- “ url ”, değiştirilen URL'yi yeni bir giriş olarak gösterir.
Örnek
Bir HTML dosyasında, “ değiştirUrl() ” düğmesi tıklandığında işlev:
< tıklama düğmesi = 'modifyUrl('CSS Eğitimi', 'CSSTutorial.html');' > 2 düğme >
< tıklama düğmesi = 'modifyUrl('JavaScript Eğitimi', 'JavaScriptTutorial.html');' > 3 düğme >
< tıklama düğmesi = 'modifyUrl('Java Eğitimi', 'JavaTutorial.html');' > 4 düğme >
Bir işlev tanımlayın ' değiştirUrl() ” düğmesine tıkladığınızda tetiklenecek bir JavaScript dosyasında. İki parametre alır, “ başlık ' ve ' url ”. Butona tıklandığında metot çağrıldığında, “başlık” ve “url” argüman olarak iletilecektir. ' türünü kontrol edin pushState ' değil ise, geçmiş nesnenin ' Tanımsız ”. Ardından, “ tarih.pushState() ” URL'yi değiştirmek için yöntem:
işlev Url'yi değiştir ( başlık , url ) {
eğer ( bir çeşit ( tarih. pushState ) != 'Tanımsız' ) {
öyleydi nesne = {
Başlık : başlık ,
url : url
} ;
tarih. pushState ( nesne , nesne Başlık , nesne url ) ;
}
}
Her düğme tıklamasında, sayfa yeniden yüklenmeden URL'nin başarıyla değiştirileceği görülebilir:
Yukarıdaki çıktıda, sol üstteki geri ok düğmesinin ( <- ) butona tıklandığında aktif ise ileri geri hareket edebileceğinizi gösterir çünkü “ pushState() ” yöntemi, geçmiş yığına yeni URL'yi ekler.
Yöntem 2: 'replaceState()' Yöntemini Kullanarak Sayfayı Yeniden Yüklemeden JavaScript'teki URL'yi değiştirin
Kullan ' değiştirDevlet() ” web sayfasını yeniden yüklemeden URL'yi değiştirmek için yöntem. Bu aynı zamanda “ geçmiş Nesne ” ancak geçmiş yığınına yeni bir giriş eklemeyecektir. Tarayıcı geçmişinin mevcut durumunu değiştirir ve onu yeni bir durumla değiştirir. Bu yaklaşımı kullanarak, sayfalar arasında geçiş yapamazsınız.
Sözdizimi
Verilen sözdizimi “replaceState()” yöntemi için kullanılır:
Örnek
Tanımlanan işlevde, “ değiştirDevlet() ” Sayfayı yeniden yüklemeden veya sayfada gezinmeden düğme tıklamasındaki URL'yi değiştirme yöntemi:
eğer ( bir çeşit ( tarih. değiştirDevlet ) != 'Tanımsız' ) {
öyleydi nesne = {
Başlık : başlık ,
url : url
} ;
tarih. değiştirDevlet ( nesne , nesne Başlık , nesne url ) ;
}
}
Çıktı, her düğme tıklamasında URL'nin değiştirildiğini ve geri ok düğmesi devre dışı bırakıldığı için geri gitmek için gezinme seçeneğinin olmadığını gösterir:
Sayfayı JavaScript'te yeniden yüklemeden URL'nin değiştirilmesiyle ilgili tüm temel bilgileri sağladık.
Çözüm
Web sayfasını yenilemeden URL'yi değiştirmek/değiştirmek için “ pushState() ” yöntemi veya “ değiştirDevlet() ' yöntem. “pushState()” yöntemi, yeni URL'yi bir geçmiş yığınına yeni bir giriş olarak ekler ve kullanıcıların ileri geri gezinmesine olanak tanır. “replaceState()” yöntemi ise URL'yi değiştirir ve arka sayfaya geçişe izin vermez. Bu makale, JavaScript kullanarak web sayfasını yeniden yüklemeden URL'yi değiştirme yöntemlerini açıklamaktadır.