Javascript ile Browser History İşlemleri

  • 05.35.2016
  • tayyipyetis
  • JQuery

http://www.11aml.com/wp-content/uploads/2016/03/javascript-logo-png.pngMerhaba arkadaşlar bu makalede javascript hakkında önemli konudan bahsedeceğim özellikle ajaxla işlem yapılan sayfalarda bazı durumlarda karşımıza çıkan ciddi problemlerin çözümü için pratik bilgi olduğunu düşünüyorum. Dikkatinizi çektiyse Asp.net kontrolleri ile yaptığımız post işlemlerinde örneğin buton tıklaması, dropdown change olayı, datepicker change olayı gibi. tarayıcınızda “Back” yani geri butonunun aktif olduğunu ve tıklayınca sayfanın siz olayı tetiklemeden önceki haline döndüğünü görmüşsünüzdür. Bunun sebebi her form post olayında tarayıcınızın history yani geçmiş listesine yeni bir sayfa eklemesinden kaynaklanır tarayıcının gözünde sizin o butonu tıkladıktan sonraki sayfa ile önceki sayfa aynı değildir zaten öyle de olması gerekir nitekim çeşitli sebeplerden tetiklediğimiz işlemin geri alınmasını isteyebiliriz.

Asp.net kontrolleri ile çalışırken bu işlemler otomatik olduğu için çok sıkıntı çıkmaz hatta browser history olayıyla hiç ilgilenmeyiz bile fakat ajax ağırlıklı sayfalar ile çalışırken sayfanın tamamını ya da bir kısmını ajax ile çekmemize rağmen tarayıcı hala bu olaydan öncesini ve sonrasını aynı sayfa olarak görür bu bazen problem olmayabilir ama örneğin ajax ile ardarda ve birbirinin üstüne açılan dialoglar, modal pencereler, form wizardlar yapıyorsanız ve kullanıcınız bir kaç adım sonraki işlemde geriye dönmek istiyorsa bu noktada ortaya bir sıkıntı çıkabilir. Ortada iki durum söz konusudur birincisi tarayıcıda o sekme için hiç history bilgisi yoktur ve geri butonu pasiftir kullanıcı fareyi istemsiz olarak (alışkanlık olduğu için) geri butonun üzerine götürecek ve butonun pasif olduğunu farkedecektir. Aslında bu kötü senaryonun iyi halidir çünkü ajaxtan önce bir form control post edilmiş ya da kullanıcı sizin sitenizden önce aynı sekmede başka siteleri ziyaret etmiş ise geri butonu aktif olacak ve aynı kullanıcı yine istemsiz olarak geri butonuna tıklayacak ve oraya kadar geldiği tüm adımları kaybedecektir bundan daha da kötüsü siz her adımda kaydetme işlemi yapmayıp en son adımda yapıyorsanız kullanıcının o ana kadar girdiği tüm bilgileri de kaybedeceksiniz.

Burada en mantıklı çözüm her adımdan bir sonrakine geçerken tarayıcıya yeni bir history bilgisi eklemek olacaktır ve tarayıcının geri gelmesi olayını dinleyerek tetiklendiğinde siz de bir önceki adımı tekrar açacaksınız bu durumda hem siz hem de kullanıcı mutlu olacaktır :) ama yine de benim tavsiyem her adımda kullanıcı bilgilerini bir şekilde cookie, database vs. bir yerlere kaydedin. örneğimize geçmeden önce bir iki bilgi vereyim. Javascript History nesnesi altında tarayıcı ileri geri vs gibi işlemler yapabilirsiniz

  1. History.forward() : bir sonraki sayfayı açar
  2. History.back() : bir önceki sayfayı açar
  3. History.go(index) : parametre olarak verilen sayı kadar ileri ya da geri gelir. örn: 2, -3
  4. History.pushState(obj, title, url) : tarayıcı geçmişine yeni bir geçmiş ekler
  5. History.replaceState(obj, title, url) : tarayıcı geçmişinde varolan sayfanın geçmiş bilgisini değiştirir
  6. History.length : geçmiş listesindeki eleman sayısını verir

replaceState fonksiyonunu sayfasının geçmiş bilgisini değiştirmek için kullanabilirsiniz. örneğin; sayfa post edildikten sonra geri butonuna basıldığında önceki bilgilerin gösterilmesini engellemek istiyorsanız bu fonksiyonu kullanabilirsiniz. kullanım örneği aşağıda

history.replaceState(null, null, document.URL);

Bir Örnek;

<a href="" onclick="sayfa2()" id="btn2">sayfa 2 yi aç</a> 
<a href="" onclick="sayfa3()" id="btn3" style=”display:none”>sayfa 3 ü aç</a>
function sayfa2() {
   var stateObj = { sayfa: "2" };
   history.pushState(stateObj, "sayfa 2", "main.html");
   document.getElementById("btn2").style.display = "none";
   document.getElementById("btn3").style.display = "";
}
function sayfa3() {
   var stateObj = { sayfa: "3" };
   history.pushState(stateObj, "sayfa 3", "main.html");
   document.getElementById("btn3").style.display = "none";
}
window.onpopstate = function (event) {
   alert(" state: " + history.state.sayfa);
   if (history.state == null) {
      document.getElementById("btn2").style.display = "";
      document.getElementById("btn3").style.display = "none";
   }
   if( history.state.sayfa == "2") {
      document.getElementById("btn3").style.display = "";
   } else if( history.state.sayfa == "1") {
      document.getElementById("btn2").style.display = "";
      document.getElementById("btn3").style.display = "none";
   }
};

sayfamızda iki adet link var ve mantık olarak şu an birinci sayfadayız birinci link ikinci sayfayı ikinci link üçüncü sayfayı açıyor. üçüncü sayfa boş olarak geliyor. ve bu arada biz her sayfa açıldığında bir history bilgisi ekliyoruz her history içine de bir obje ekliyoruz bu objede diğer sayfaya geçmeden önce o an hangi sayfada olduğumuzu ekliyoruz ayrıca pencere üzerinde onpopstate eventini dinliyoruz bu olay kullanıcı geriye gittiğinde tetiklenir. şimdi üçüncü sayfadayız ve bir geriye geldiğimizde bu olay tetiklenecek ve bize “state: 2” mesajı verecek yani bir nevi “şu an ikinci sayfaya geldiniz” demek isteyecektir. bir geriye bastığımızda “state: 1” yani şu an birinci sayfadasınız diyecektir. sizler kendi iş mantığınıza göre bu olayı dinleyip ajax işlemleriniz tetikleyebilirsiniz. örneğin 1,2,3… diye giden adımlarınızın kullanıcının alışkanlığını bozmadan geriye de gidilebilir hale getirebilirsiniz. Umarım faydalı olmuştur herkese kolay gelsin.

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap