Sayfayı yeniden yüklemeden URL’yi nasıl değiştirebilirim?

Sayfayı yeniden yüklemeden geçerli sayfanın URL’sini değiştirmenin bir yolu var mı? Mümkünse #’dan önceki bölüme erişmek istiyorum.

İlişkili olduğu konular : friendly-url, html, javascript, url, url rewriting

Sayfayı yeniden yüklemeden geçerli sayfanın URL’sini değiştirmenin bir yolu var mı? Mümkünse #’dan önceki bölüme erişmek istiyorum. Ya da başka bir deyişle yalnızca domainden sonraki bölümü değiştirmek istiyorum.

Örneğin Facebook’ta veya bir haber sitesinde bir fotoğrafı açtığınızda Facebook’un yaptığı şey budur. URL çubuğu doğrudan bu fotoğrafı işaret etmek için değişir, böylece URL’yi sitenin neresinde olduğunuzu kaybetmeden paylaşabilirsiniz.

İlk akla gelen çözüm window.location kullanmak. Ama bu çözüm sayfayı yeniler.

 window.location.href = "www.mysite.com/page2.php";  
// bu çözüm sayfayı yeniler.

Ancak, history.pushState ile yapabiliriz bunu. Örnek:


document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);

Daha sonra geri/ileri düğmesini algılamak için ise window.onpopstate kullanabiliriz:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Tarayıcı geçmişini manipüle etmeye daha ayrıntılı bir bakış için, bu MDN makalesine bakabilirsiniz.


URL’yi değiştirmek ancak girdiyi tarayıcı geçmişine eklemek istemiyorsanız HTML5 replaceState’i de kullanabilirsiniz:

if (window.history.replaceState) {
   window.history.replaceState(statedata, title, url);
}

Bu yöntem geri düğme işlevselliğini ‘bozar’. Bu durum bazen (her görüntüde geri dönmek yerine galeri dizini sayfasına geri dönmesini istediğiniz gibi bir durumda) kullanışlı olabilir.

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: Yazı, HTML, Javascript

Okumaya devam et!

jQuery ile checkbox’ın seçili olduğunu nasıl kontrol ederim?

Onay kutusunun checked özelliğini denetlemek ve jQuery kullanarak denetlenen özelliğe göre bir eylem gerçekleştirmek istiyorsunuz.

JavaScript ile bir öğenin sınıfını nasıl değiştirebilirim?

JavaScript kullanarak bir HTML öğesinin sınıfını nasıl değiştirebiliriz? Veya onclick gibi bir eyleme yanıt olarak class’ı nasıl değiştirebiliriz? Sınıfları değiştirmek için modern HTML5 Teknikleri Modern tarayıcılar, bir kitaplığa ihtiyaç duymadan sınıfları değiştirmeyi kolaylaştıran yöntemler sağlayan classList’i eklediler: Ne yazık ki, bunlar v10’dan önce Internet Explorer’da çalışmaz, ancak giderek daha fazla desteklendiğini söyleyebiliriz.

script etiketlerini HTML’de nereye koymalıyız?

JavaScript’i bir HTML belgesine yerleştirirken, <script> etiketlerini koymanın en uygun yeri neresidir?  Bir tarayıcı <script> etiketi bulunan bir web sitesini yüklediğinde şunlar olur : HTML sayfasını getirir (örn.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.