如何在window.popstate之後恢復原始內容？

下面的代碼繼續推送一個新的URL到狀態對象，同時動態地改變頁面的內容。但是，當我開始按下Back按鈕並返回到原始頁面時，原始內容不會顯示，而是保留下一頁的內容。我如何實現它？如何在window.popstate之後恢復原始內容？

<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery.js"></script> 
<script> 
$(document).ready(function(){ 
a = 0; 
    $("p").click(function(){ 
var stateObj = { note : ++a }; 
history.pushState(stateObj, "page 2", "http://localhost/foo/"+a); 
$(this).text(a);  
    }); 
    window.addEventListener('popstate', function(e){ 
    if (history.state){ 
    $("p").text(e.state.note); 
if (location.href == 'http://localhost/hist.php') { $('p').text('If you click on me, I will disappear.'); } 
    } 
}, false); 
$("div").click(function() { alert(e.state.note); }); 
    }); 
</script> 
</head> 
<body> 
<p>If you click on me, I will disappear.</p> 
<div>Hi</div> 
</body> 
</html>

來源

2012-09-21 SexyBeast

這是您的責任，在popstate上更新網頁內容。瀏覽器只處理狀態。

我有一個應用程序，我通過菜單樹導航來替換頁面的主要內容。我還根據新內容更新了頁面標題。

當我剛回到AJAX加載頁面時，我可以保存url加載到StateObj。但是回到最初的頁面時，沒有狀態，沒有保存的標題來恢復。

我決定重新加載整個頁面，當我回到最初的歷史記錄狀態：

var doc_state={'title': ''}; 
var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href; 
function loadDocument(path,title){ 
    $('#document_area').html('<img src="spinner.gif" />'); 
    $('#document_area').load(path+'?ajax=true'); 
    document.title = title; 
} 

$(document).ready(function(){ 
    $('a.ajax_link').click(function(event){ 
     var path=$(this).attr('href'); 
     var title=$(this).text(); 
     doc_state['title']=title; 
     event.preventDefault(); 
     loadDocument(path,title); 
     window.history.pushState(doc_state,document.title,path); 
    }); 
    $(window).bind('popstate', function(event){ 
     // Ignore inital popstate that some browsers fire on page load 
     var initialPop = !popped && location.href == initialURL; 
     popped = true; 
     if (initialPop) return; 

     var state = event.state; 
     if (!state){ 
      state=history.state; // FF 
     } 

     if (state){ 
      var title= state.title; 
      loadDocument(location.pathname, title); 
     } 
     else window.location.reload(); 

    }); 
}

來源

2013-06-18 18:31:39

如何在window.popstate之後恢復原始內容？

回答

相關問題