Jak odświeżyć tylko część strony po naciśnięciu klawisza F5 lub przycisku odświeżania?

Question

Projektuję aplikację internetową, która ma wspólne menu dla wszystkich stron. Z tego powodu postanowiłem załadować zawartość powiązaną z przyciskami menu wewnątrz elementu div, używając jquery.

Tak, mam to:

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

chcę śledzić strony wyświetlanej wewnątrz "#content" div. Jeśli użytkownicy odświeżają stronę, chcę załadować tę samą stronę w "#content". Czy jest jakiś sposób to zrobić, czy istnieje jakieś obejście?

Widziałem niektóre witryny internetowe, które używają elementu iframe do ładowania stron, ale gdy użytkownik kliknie przycisk w menu, adres URL również zostanie zmieniony. Nie znalazłem żadnych informacji, jak to zrobić.

Dzięki

Answer 1

Należy dołączyć parametr do części hash url (po #), na przykład domain.com/index.php#addproduct

następnie document.ready sprawdzić wartość po # i załaduj odpowiednią treść.

Niektóre wtyczki, takie jak jQuery history, używają tej techniki.

Ponadto można wykorzystać lokalną pamięć podręczną i części pamięci podręcznej kodu w przeglądarce, aby nie ładować zawartości za pomocą wywołania AJAX po raz drugi.

Answer 2

Oto rozwiązanie dla F5 i 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

Alternatywnie, zamiast używać skrótu, można użyć API HTML5 Historia (pushState, replaceState, a popstate). Zasadniczo jest to skrót z pewnymi ulepszeniami (na przykład indeksowany przez wyszukiwarki).

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