jquery AJAX後退問題

Question

這有點奇怪，可以解釋爲什麼我這樣做不好。

即時通訊工作在一個移動網站，即時嘗試塑造成一個iOS應用程序（最終）。 在這個頁面上，我有一個菜單按鈕，點擊，顯示/隱藏菜單。

大部分工作都可以正常工作，但問題在於，當您點擊「返回」按鈕並且瀏覽器用完之前的位置返回時，菜單按鈕會中斷。當你點擊它時，沒有任何反應。它表現得好像什麼都沒有。

錯誤是這樣的，如果在索引（或第一頁）上，您單擊一個鏈接前進，然後在瀏覽器上點擊後退按鈕，它會立即中斷。

如果你在索引上，並以任何順序打5個鏈接（本質上是你前進5xs），然後，你打回高達4xs，菜單仍然工作....你可以基本上繼續向前按鏈接並保持良好狀態，儘可能按照你想要的方式回擊，並且停止短於你前進的總次數並且仍然沒問題。

由於很快當你擊中最大的背部，並且在頁面位置的歷史記錄中沒有任何東西可以返回時，菜單隨即打破。

這裏是這個假網站的即時通訊工作的鏈接（我的服務器上） 注：測試，在加載時，手動縮小瀏覽器約400寬度，所以你可以看到頁面生效。

編輯** woops忘了鏈接 http://somdowprod.net/4testing/mobile/less1.html

，這裏是我的代碼

的javascript：（我離開的意見在裏面，所以你可以看到我的邏輯是...也許IM去錯了嗎？）

// JavaScript Document 
$(document).ready(function(){ 
var newHash = ""; 
var menuBtn = $('.leftButton'); 

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide 
    menuBtn.click(menuShowHide); 
    //===========================// 

    //~~~~~~~~~~~~~~~~~~~~~~~~~~~MENU SHOW/HIDE 
    function menuShowHide(){ 
     $('#menu').toggleClass(); 

//  if($('#menu').css("display") == "none"){ 
//   $('#menu').css("display","block"); 
//  } else { 
//   $('#menu').css("display","none"); 
//  } 
     scroll(0,0);  
    } 
    //===========================// 


    //~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE is-loaded trick. 
     function isLoaded(){ 
      $('#progress').remove();  
     } 
    //===========================// 



    //~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE HOME PAGE 
     if(newHash == ""){ 
      $('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble. 
      $('#contentHere').load('index.html #content', isLoaded);//load the content div from the index.html file 
     } 
    //===========================// 




    //~~~~~~~~~~~~~~~~~~~~~~~~~~~Load the clicked content into my container via jQuery AJAX 
    $('#menu a').click(function(){ 
     menuShowHide(); 
     window.location.hash = $(this).attr('href'); 
     return false; //doesnt let the link jump to a new page 

    }); 

    $(window).bind('hashchange',function(){ 
     newHash = window.location.hash.substring(1); 
     $('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble. 
     $('#contentHere').load(newHash, isLoaded); 
     //console.log(newHash); 

    }); 

    //===========================// 



}); 

任何人有什麼想法，什麼使菜單中斷？先謝謝了。

Answer 1

使用瀏覽器後退按鈕已知hashchange事件是不可預知的。

這是發生了什麼事。當您一路回到起點時，整個less.html頁面將被加載到它自己的'contentHere'容器中，並且由於document.ready將不會在此子頁面上調用，因此不會將menuButton.click處理程序分配給鏈接，所以點擊它們不會做任何事情。

雖然能夠在異步更改中使用瀏覽器後退和前進按鈕將是一個很好的功能，但我不認爲人們會錯過它足以讓您嘗試破解解決方法。人們習慣於不能在異步加載的內容上使用後退和前進按鈕。他們會嘗試一次，看到它將他們帶到您的網站的推薦人，向前推進，並潛意識地使用您的菜單而不是後退和前進按鈕。

然而，更好的建議可能是完全擺脫AJAX功能，讓鏈接按照人們期望的方式行事。好的，所以你失去了很酷的「加載」模式，你可以爲用戶節省很多時間，但是你不會混淆人們對你的界面的期望。

編輯：爲了回答下面的問題，而不是使用load（）來獲取靜態內容（這是過度殺傷），將所有內容作爲部分放在less.html文件中，並使用菜單選項隱藏/取消隱藏。這裏有兩種方法可以做到這一點，每一個都有自己的優點和缺點：

1. 修正了CSS的標題（包括菜單）（例如：lifeinthegrid.com/simple-css-fixed-header/）和然後讓你的菜單鏈接到沒有JavaScript事件處理程序的普通錨鏈接。當你點擊菜單中的一個鏈接時，內容跳轉到該部分，並且由於你的頭部已修復，它有一種非常快速的httpRequest的感覺。優點：最小的JavaScript，瀏覽器的後退和前進按鈕將起作用。缺點：固定的元素在老式智能手機上是一種麻煩，下一部分可能會潛入視口的底部並破壞幻覺。解決方案：在它們之間放更多空間。

2. 另一種方法是在不同的內容部分使用show（）/ hide（）。所以，假設您點擊「關於我們」。所有部分都隱藏起來，顯示'關於我們'的內容。優點：它不像固定元素那樣煩人，你可以使用FadeIn（）/ FadeOut（）或其他JQuery動畫效果來加強它。缺點：您的瀏覽器歷史記錄不會跟蹤這些更改，除非您執行一些window.location hackery。