Сохранить состояние страницы для повторного просмотра с помощью кнопки Назад браузера
У меня есть страница, которая динамически загружает контент, основанный на нажатии пользователем кнопки:
${document).ready(function)
{
$("#myButton").click(function()
{
$("#dynamicDiv").load("www.example.com");
});
}
Динамический контент работает отлично, я могу получать страницы в течение всего дня. Но после того, как вы перейдете по ссылке на другую страницу, а затем нажмете кнопку возврата браузера, чтобы вернуться на страницу, страница полностью сбрасывается, как будто никогда не загружалось динамическое содержимое.
Я клянусь, что видел раньше другое поведение, но, возможно, я сумасшедший. Разве браузер не должен сохранять состояние страницы, а наоборот чем его перерисовывать?Править: Кстати, я использую Play! рамки, если это имеет какое-то отношение к этому.
4 ответа:
Браузер загружает страницу в том виде, в каком она была получена в первый раз. Любые модификации DOM, выполненные с помощью javascript, не будут сохранены.
Если вы хотите сохранить изменения, вам придется сделать дополнительную работу. После изменения DOM обновите хэш url-адреса с помощью идентификатора, который можно позже проанализировать и повторно создать изменение. Всякий раз, когда страница загружается, Вы должны проверить наличие хэша и сделать модификации DOM на основе идентификатора.
Например, если вы динамическое отображение информации о пользователе. Каждый раз, когда вы показываете его, вы меняете хэш url на что-то вроде этого: "#/user/john". Всякий раз, когда страница загружается, вам нужно проверить, существует ли хэш (окно.местоположение.hash ), проанализируйте его и загрузите информацию о пользователе.
Реализовать обратную функциональность браузера сложно. Это становится проще, когда вы используете плагин, как jquery.история.JS.
Эпигнозисх и Малкольм оба правы. Это также известно как"глубокое связывание". Мы использовали плагин jQuery Address для решения этой проблемы в недавнем приложении Play.
Метод, который я использую для этого, заключается в сериализации состояния в JSON, сохранении его в хэш-строке,а затем считывании его обратно, когда страница возвращается. Это было протестировано в IE10+, Firefox, Chrome.
Пример:
// On state change or at least before navigating away from the page, serialize and encode the state // data you want to retain into the hash string window.location.hash = encodeURIComponent(JSON.stringify(myData)); // If navigating away using Javascript, be sure to use window.location.href over window.location.replace window.location.href = '/another-page-url' .... // On page load (e.g. in an init function), if there is data in the #hash, overwrite initial state data // by decoding and parsing the JSON string if (window.location.hash) { // Read the hash string omitting the # prefix var hashJson = window.location.hash.substring(1); // Restore the deserialized data to memory myData = JSON.parse(decodeURIComponent(hashJson)); }