Ajax ve geri düğmesi. Karma değişiklikler, ancak önceki sayfa durumu nerede saklanır?

ajax'ı arka düğmesiyle yapmaya çalışıyorum ve merkezi bir şey eksik. Önceki sayfa durumları nerede saklanır?Ajax ve geri düğmesi. Karma değişiklikler, ancak önceki sayfa durumu nerede saklanır?

DURUM 1:

tıklayın "Beni kırmızı yap". ajax olayı oluşur ve sayfa kırmızıya döner. Karma = #red

"Beni sarı yap" seçeneğini tıklayın. ajax olayı oluşur ve sayfa sarıya döner. Hash = #yellow

Geri düğmesine tıklayın. Hash artık #red'e geri döndü. Ama sayfanın da kırmızı olmasını istiyorum. Hala sarı.

DURUM 2:

tıklayın "Beni kırmızı yap". ajax olayı oluşur ve sayfa kırmızıya döner. Karma = #red

"Diğer siteye git" seçeneğini tıklayın. Google'a gider.

Geri düğmesine tıklayın. Siteye geri döndük, hash = #red, ama sayfanın da kırmızı olmasını istiyorum! AJAX kullanırken

<!DOCTYPE html> 
<html> 
<style> 
    .red{background:red} 
    .yellow{background:yellow} 
</style> 
<head> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     $('.ajax_thing').click(function(){ 
      location.hash=$(this).attr('action_type'); 
      return false 
     }) 
     var originalTitle=document.title 
     function hashChange(){ 
      var page=location.hash.slice(1) 
      if (page!=""){ 
       $('#content').load(page+".html #sub-content") 
       document.title=originalTitle+' – '+page 
      } 
     } 
     if ("onhashchange" in window){ // cool browser 
      $(window).on('hashchange',hashChange).trigger('hashchange') 
     }else{ // lame browser 
      var lastHash='' 
      setInterval(function(){ 
       if (lastHash!=location.hash) 
        hashChange() 
       lastHash=location.hash 
      },100) 
     } 
    }) 

    </script> 
</head> 
<body> 
<menu> 
     <li><a class="ajax_thing" id = "red_action" action_type="red">Make me red</a></li> 
     <li><a class="ajax_thing" id = "yellow_action" action_type="yellow">Make me yellow</a></li> 
</menu> 
     <li><a href = "http://www.google.com">Go to other site</a></li> 
</body> 
</html> 
<script> 

$("#red_action").click(function(e) { 
    // ajax here. on success: 
    $("body").removeClass("yellow"); 
    $("body").addClass("red"); 
}) 

$("#yellow_action").click(function(e) { 
    // ajax here. on success: 
    $("body").removeClass("red"); 
    $("body").addClass("yellow"); 
}) 

</script>

kaynak

2013-07-21 user984003

https://github.com/browserstate/history.js/ – gmaliar

'a bakmanız gerekir. Herhangi bir "ajax isteği" görmüyorum ve ayrıca çok fazla "semicolons" un olduğunu da unutmamalısınız –

Eksik noktalı virgüllerin olması gerekir. tamam. Kodun çoğunu başka bir yerden aldım. Ben gerçek ajax isteğini yapmıyorum çünkü bunu herkes için olduğu gibi burada çalışmak istedim. Ama domu değiştiririm, ajax isteğinin yapacağı şey budur. Gerçek bir ajax isteğinin sihirli bir şekilde çalışmasını sağlayan şey olduğunu mu düşünüyorsun? – user984003

elle Sonra bir onpopstate etkinlik için bir fonksiyon testi oluşturmak

history.pushState

kullanarak ve gerektiğinde içeriği güncellenmesi tarihini güncellemeniz önemlidir.

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

kaynak

2013-07-21 07:20:53 j00lz

Yığın Taşması hoş geldiniz. Lütfen cevabınızdaki bağlantıları özetleyin; bu şekilde, eğer bağlantılar giderse, cevap tamamen işe yaramaz. – michaelb958

Bu, kullanıcıların önerdiği veya tüm tarayıcılarda history.js gibi görünüyor. (Aslında bir değişiklik yaptıktan sonra sayfayı yeniden yüklediğimde daha basit bir şey yaptım, bir hash ile değişikliklerin izini sürdüm) – user984003

yerine URL'leriniz JavaScript sürmesine izin, URL'lerinizi götürmek için JavaScript kullanarak. window.onhashchange olay işleyicisinin tüm işleri yapmasına izin verin. Diğer her şey sadece hash değiştirmelidir.

Hatta gerek sadece sağ karma url set, bağlantılar için işleyicileri tıklamayın: Sonra

<a href="#red">Red</a>

, sizin hashchange işleyicisi gerisini halleder:

function hashChange() { 
    var page = location.hash.slice(1); 
    if (page) { 
     $('#content').load(page+".html #sub-content"); 
     document.title = originalTitle + ' – ' + page; 
     switch (page) { 
      // page specific functionality goes here 
      case "red": 
      case "yellow": 
       $("body").removeClass("red yellow").addClass(page); 
       break; 
     } 
    } 
}

hashı değiştirmenin tek nedeni, sayfaya geri gelebilmek ve URL'ye göre aynı durumu yüklemesini sağlamaktır. Yani, zaten URL'nin JavaScript'i çalıştırmasına izin verme zorunluluğunuz var, değil mi? Else neden karmaşayı değiştiriyorsun? İşlevleri tıklama işleyicilerinden ve hashchange olayına taşımak yalnızca işleri basitleştirir.

kaynak

2013-07-21 08:29:05 gilly3

Ama yine de içeriği yüklemiyor. Ayrıca, ajax href tahrik değildir. Benim gerçek kodumda ajax calla ve bir etiket ekler bir düğme var. – user984003

@ user984003 - Anlamıyorum. İçerik neden yüklenmedi? Bağlantı yerine düğmeyi kullanmanız neden önemlidir? – gilly3

Cevabınızı anladığım kadarıyla, durumu özellikle de olduğu gibi geri döndürmek için kod yazmam gerekiyor. arka planı kırmızıya ayarlamak. Ancak kullanıcı bir etiket ekleyebilir, derecelendirmeyi değiştirebilir ve öğeyi ajax yoluyla bir sepete ekleyebilir. Bu durumu tek bir sopayla elde etmenin bir yoluna ihtiyacım var. pushState veya history.js, kullanıcıların önerdiği gibi görünüyor. – user984003

Ajax ve geri düğmesi. Karma değişiklikler, ancak önceki sayfa durumu nerede saklanır?

cevap

İlgili konular