Merhaba,

Bildiğimiz üzere HTML 5 ile birlikte PushState kullanarak tarayıcının URL si dahil bir çok (Başlık vs.) sayfa yenilemeden değiştirilebiliyor.

Bu noktada sayfayı değiştirmeden bilgilerini değiştirebiliyorsak jquery load veya ajax kullanarak başka bir sayfanın verilerini çekip bilgilerini değiştirdiğimiz aynı sayfaya yükleyebiliriz.

ÖZET
Kısacası Youtube, Facebook, Chrome Eklentiler dahil bir çok sayfada olduğu gibi sayfayı yenilemeden içerikleri değiştirmek mümkün.

PROBLEM
Problem şu ki: Internet Explorer 10 ve aşağısı sürümlerde HTML5 desteklenmiyor ve dolayısıyla " PushState History " özelliği de desteklenmiyor.

ÇÖZÜM
Bu noktada Jquery Eklentileri devreye giriyor. Ki "Araştırmalarım sonucu bilindik en stabil plug'in History.js eklentisidir."
Bu vb. eklentiler History özelliği olmayan tarayıcılarda URL lerin arasına "#" hash koyarak sorunu çözüyor. Tabi link yapınız değişmiyor SEO açısından bir sıkıntısının olduğunu düşünmüyorum, robotlar "#" olmadan sayfalara ulaşacaklardır. (Benzer örneklerini görmüşsünüzdür)

En basiti: IE 9 ile Chrome Eklentiler sayfasına girin ve bir eklentiye tıklayın. URL yi takip ederseniz araya "#" koyup yeni sayfayı çağıracaktır.



SORU 1
Biraz araştırdım. Neredeyse hiç Türkçe kaynak yok internette. "PushState kullanımı, History.js kullanımı vs. vs." Türk developerler bu olaya neden hala ayak uyduramadı anlamadım. Acaba tercih mi edilmiyor? Bilmediğim bir sakıncaları mı var merak ettim.

SORU 2
History.js 'i indirip test ettim. Gayet güzel çalışıyor.

Ancak şöyle bir sorun var.

<a href="ornek.com/test.php">Test Sayfası</a>

böyle bir bağlantıya tıkladığımızda jQuery Load ile "text.php" 'i çekip sayfanızda örneğin (body) tagının içine yüklemeniz gerekiyor. Ancak çektiği sayfanın zaten kendine ait html tagı, head tagı, title tagı vs. var. html içine html yüklemiş oluyoruz.

Bizim text.php 'i load edip, sadece body tagının içinde kalanları içeri yüklememiz lazım.
Ayrıca text.php den gelen title tagının içindekileri asıl sayfadaki title tagına basmamız gerekiyor.

İşte bu noktada takıldım kaldım. Yardımlarınızı bekliyorum. (Ajax load ile gelen tüm bir sayfanın belirli bir tag içindeki verilerini nasıl çekeriz örneğin "head" veya "body")

$("html").load(State.url + "#content", function() { bu şekilde ilgili sayfada ID verilen bir div i çekebiliyoruz ama bu doğu bir yöntem midir? ayrı bir soru! Tabi o sayfanın başlığını "title" mevcut sayfaya aktarmak hala büyük bir sıkıntı. Bahsettiğim siteler bunu nasıl çözüyorlar


Bahsettiğim kod:

$("html").load(State.url, function() {
    ......
});

State.url dediğini text.php gibi düşünün.


Bu da History.js ile yapılmış tam bir örnek:

$(function() { 
     
     // run after page is loaded 
     ajaxifyLinks(); 
 }); 


 function ajaxifyLinks() { 

     // whenever a hyperlink is clicked... 
     $("a").click(function() { 
     
         // create an object to pass as state data 
         var data = {}; 
         
         // do whatever you want to the data 
         data.putYour = "data here"; 
         
         // update the url, preserve title 
         History.pushState(data, document.title, $(this).attr('href')); 
         
         // cancel the normal action of the hyperlink 
         return false; 
     }); 
     
 } 


 History.Adapter.bind(window,'statechange',function() { 

     // store the State object 
     var State = History.getState(); 
     
     // all the data you passed is accessable here now 
     var data = State.data; 
     
     // at this point you do whatever needs to be done to update the page. 
     // in this case, it is loading the new URL into my #main div. 
     
     // load the new url into #main 
     $("html").load(State.url, function() { 
         
         // after new page is loaded, do stuff here 
         //alert("Page has been loaded!"); 
         
         // and re-ajaxify the links 
         ajaxifyLinks(); 
     }); 
     
 });