Cómo actualizar solo una parte de la página cuando se presiona F5 o botón de actualización

Question

Estoy diseñando una aplicación web que tiene un menú compartido para todas las páginas. Debido a esto, decidí cargar los contenidos vinculados por los botones de menú dentro de un div, usando jquery.

Por lo tanto, tengo unas pocas cosas:

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

Quiero hacer un seguimiento de la página que se muestra dentro de la "#content" div. Si los usuarios actualizan la página, quiero cargar la misma página en "#contenido". ¿Hay alguna manera de hacer esto o hay alguna solución alternativa?

Vi algunos sitios web que usan un iframe para cargar las páginas, pero cuando un usuario hace clic en un botón en el menú, la URL también se cambia. No encontré ninguna información sobre cómo hacer eso.

Gracias

Answer 1

Debe añadir parámetros a la parte hash de la url (# después), por ejemplo domain.com/index.php#addproduct

Luego, el document.ready comprobar el valor después de # y carga el contenido correspondiente.

Algunos complementos como jQuery history utilizan esta técnica.

Además, puede aprovechar el almacenamiento local y las partes de la memoria caché del código en el navegador, por lo que no cargará el contenido con la llamada AJAX por segunda vez.

Answer 2

Aquí es una solución para el F5 y 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

Como alternativa, en lugar de utilizar un hash, puede utilizar la historia API HTML5 (pushState, replaceState, y popstate). Básicamente, es un hash con algunas mejoras (por ejemplo, indexable por los motores de búsqueda).

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