Сохранить состояние страницы для повторного просмотра с помощью кнопки Назад браузера


У меня есть страница, которая динамически загружает контент, основанный на нажатии пользователем кнопки:

${document).ready(function)
{
    $("#myButton").click(function()
    {
        $("#dynamicDiv").load("www.example.com");
    });
}

Динамический контент работает отлично, я могу получать страницы в течение всего дня. Но после того, как вы перейдете по ссылке на другую страницу, а затем нажмете кнопку возврата браузера, чтобы вернуться на страницу, страница полностью сбрасывается, как будто никогда не загружалось динамическое содержимое.

Я клянусь, что видел раньше другое поведение, но, возможно, я сумасшедший. Разве браузер не должен сохранять состояние страницы, а наоборот чем его перерисовывать?

Править: Кстати, я использую Play! рамки, если это имеет какое-то отношение к этому.

4 13

4 ответа:

Браузер загружает страницу в том виде, в каком она была получена в первый раз. Любые модификации DOM, выполненные с помощью javascript, не будут сохранены.

Если вы хотите сохранить изменения, вам придется сделать дополнительную работу. После изменения DOM обновите хэш url-адреса с помощью идентификатора, который можно позже проанализировать и повторно создать изменение. Всякий раз, когда страница загружается, Вы должны проверить наличие хэша и сделать модификации DOM на основе идентификатора.

Например, если вы динамическое отображение информации о пользователе. Каждый раз, когда вы показываете его, вы меняете хэш url на что-то вроде этого: "#/user/john". Всякий раз, когда страница загружается, вам нужно проверить, существует ли хэш (окно.местоположение.hash ), проанализируйте его и загрузите информацию о пользователе.

Реализовать обратную функциональность браузера сложно. Это становится проще, когда вы используете плагин, как jquery.история.JS.

Http://tkyk.github.com/jquery-history-plugin/

Эпигнозисх и Малкольм оба правы. Это также известно как"глубокое связывание". Мы использовали плагин jQuery Address для решения этой проблемы в недавнем приложении Play.

Http://www.asual.com/jquery/address/

Метод, который я использую для этого, заключается в сериализации состояния в 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));
}