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

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

15 голосов
/ 26 января 2012

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

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

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

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

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

Ответы [ 4 ]

20 голосов
/ 26 января 2012

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

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

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

3 голосов
/ 26 января 2012

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

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

1 голос
/ 05 сентября 2017

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

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

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

...