Как обновить только часть страницы при нажатии кнопки F5 или refresh

Я разрабатываю веб-приложение, которое имеет общее меню для всех страниц. Из-за этого я решил загрузить содержимое, связанное кнопками МЕНЮ внутри div, используя jquery.

Итак, у меня есть это:

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

Я хочу отслеживать страницу, отображаемую внутри div "#content". Если пользователи обновляют страницу, Я хочу загрузить ту же страницу в "#content". Есть ли способ сделать это, или есть ли обходной путь?

Я видел некоторые сайты, которые используют iframe для загрузки страниц, но когда пользователь нажимает кнопку в меню, url-адрес также изменяется. Я не нашел никакой информации о том, как это сделать.

спасибо

8
html iframe javascript jquery

3 ответов

вы должны добавить параметр к хэш-части url (после #), например domain.com/index.php#addproduct

затем на документ.ready проверьте значение после # и загрузите соответствующее содержимое.

некоторые плагины, такие как история jQuery использовать эту технику.

кроме того, вы можете использовать локальное хранилище и кэшировать части кода в браузере, поэтому вы не будете загружать содержимое с помощью AJAX-вызова во второй раз.

5

вот решение для F5 и CTRL+R

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

кроме того, вместо использования хэша вы можете использовать API истории HTML5 (pushState, replaceState и popstate). В принципе, это хэш с некоторыми улучшениями (например, индексируемый поисковыми системами).

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

0