Come aggiornare solo una parte della pagina quando si preme F5 o il pulsante di aggiornamento

Question

Sto progettando un'applicazione Web che dispone di un menu condiviso per tutte le pagine. A causa di ciò ho deciso di caricare i contenuti collegati dai pulsanti del menu all'interno di un div, usando jquery.

Così, ho questo:

 $("#AddNewProductBtn").click(function() { 
     $("#content").load("addproduct.html"); 
    }); 

voglio tenere traccia della pagina visualizzata all'interno del div "#content". Se gli utenti aggiornano la pagina, voglio caricare la stessa pagina in "#content". C'è un modo per farlo, o c'è qualche soluzione?

Ho visto alcuni siti Web che utilizzano un iframe per caricare le pagine, ma quando un utente fa clic su un pulsante nel menu viene anche modificato l'URL. Non ho trovato alcuna informazione su come farlo.

Grazie

Answer 1

Si dovrebbe aggiungere il parametro alla parte hash dell'URL (dopo il #), ad esempio domain.com/index.php#addproduct

Poi document.ready controllare il valore dopo # e carica il contenuto corrispondente.

Alcuni plug-in come jQuery history utilizzano questa tecnica.

Inoltre, è possibile sfruttare la memoria locale e le parti della cache del codice nel browser, in modo da non caricare il contenuto con la chiamata AJAX la seconda volta.

Answer 2

Ecco una soluzione per il F5 e CTRL + R

$(document).keydown(function(e) { 
    if (e.which == 116 || e.keyCode == 82 && e.ctrlKey) { //116 = F5 
     $("#content").load("addproduct.html"); 
     return false; 
    } 
}); 

Answer 3

In alternativa, invece di utilizzare un hash, è possibile utilizzare l'HTML5 storia API (pushState, replaceState, e popstate). Fondamentalmente, è un hash con alcuni miglioramenti (per esempio, indicizzabili dai motori di ricerca).

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
http://www.w3.org/TR/html5/history.html