Ajax, кнопка назад и обновления DOM

Если javascript изменяет DOM на странице A, пользователь переходит на страницу B, а затем возвращается назад, чтобы вернуться на страницу A. Все изменения в DOM страницы A теряются, и пользователю предоставляется версия, изначально полученная из сервер.

Он работает таким образом в stackoverflow, reddit и многих других популярных веб-сайтах. (попробуйте добавить комментарий к этому вопросу, затем перейдите на другую страницу и нажмите кнопку возврата, чтобы вернуться - ваш комментарий будет "ушел" )

Это имеет смысл, но некоторые веб-сайты (apple.com, basecamphq.com и т.д.) каким-то образом заставляют браузер обслуживать пользователей в последнем состоянии страницы. (перейдите в http://www.apple.com/ca/search/?q=ipod, щелкните по ссылке "Загрузка" вверху, а затем нажмите кнопку "Назад" - все обновления DOM будут сохранены)

где несогласованность, исходящая из?

Ответ 1

Один ответ. Среди прочего, выгрузка событий приводит к тому, что кеш back/forward недействителен.

Некоторые браузеры сохраняют текущее состояние всей веб-страницы в так называемом "bfcache" или "кеше страницы". Это позволяет им перерисовывать страницу очень быстро при навигации по кнопкам "назад" и "вперед" и сохраняет состояние DOM и всех переменных JavaScript. Однако, когда страница содержит события onunload, эти события могут потенциально привести страницу в нерабочее состояние, и поэтому страница не будет сохранена в bfcache и должна быть перезагружена (но может быть загружена из стандартного кеша) рендеринга с нуля, включая запуск всех обработчиков onload. При возврате на страницу через bfcache DOM сохраняется в прежнем состоянии, без необходимости запускать обработчики onload (потому что страница уже загружена).

Обратите внимание, что поведение bfcache отличается от стандартного кеша браузера в отношении Cache-Control и других HTTP-заголовков. Во многих случаях браузеры кэшируют страницу в bfcache, даже если она не хранит ее в стандартном кеше.

jQuery автоматически присоединяет событие unload к окну, поэтому, к сожалению, использование jQuery приведет к дисквалификации вашей страницы из-за сохранения в bfcache для сохранения DOM и быстрого back/forward. [Обновление: это было исправлено в jQuery 1.4, поэтому оно относится только к IE]

Информация о Firefox bfcache
Информация о кэше страницы Safari и возможные будущие изменения в том, как разгрузить события работают
Opera использует быструю навигацию по истории
В Chrome нет кеша страницы ([1], [2])
Страницы для игры с DOM-манипуляциями и bfcache:
- Эта страница будет сохранена в обычном кеше
- Эта страница не будет, но все равно будет bfcached

Ответ 2

Я пытаюсь заставить Chrome вести себя так, как это делает Safari, и единственный способ, который я нашел, это установить Cache-control: no-store в заголовках. Это заставляет браузер повторно извлекать страницу с сервера, когда пользователь нажимает кнопку "Назад". Не идеально, но лучше, чем показывать устаревшую страницу.

Ответ 3

Facebook запоминает состояние страницы, изменяя хэш-идентификатор в URL-адресе для запросов ajax. Эти изменения записываются в историю браузера, поэтому, когда пользователь нажимает кнопку "Назад", хеш изменяется на то, что было раньше. Таким образом, подразумевается, что вам понадобится Javascript для мониторинга идентификатора и реакции, когда он будет изменен браузером. Andreas Blixt имеет хэш-мониторинг script доступен.

Ответ 4

Это не имеет никакого отношения к символу hash (#).

Если вы хотите проверить заголовки HTTP-заголовков Apple, это просто кеширование страницы.

Ответ 5

Использование идентификатора хеша/фрагмента URL-адреса является довольно распространенным способом захвата/запоминания состояния в веб-приложении, которое использует обновления Ajax и DOM.

Просмотрите Really Simple History для некоторых идей. Возможно отслеживать URL-адрес для изменений хеша, и rsh делает это, принимая во внимание различия браузера.

Ответ 6

Для всех, кто работает в проблемах с Rails, и это - ваша проблема не в bfcache (я думал, что это так) - это камень turbolinks. Здесь, как удалить его.

Надеюсь, это сэкономит вам время и ударит головой о стену.

Ответ 7

То, что вы ищете, предназначено для управления хэшем URL определенного типа. # В URL-адресе только для клиентской стороны.

Когда вы меняете состояние спины с помощью JS, вы обновляете данные в # url.

Также вы добавляете некоторый тип опроса, который контролирует, изменил ли хэш, и загружает состояние страницы на основе новых данных в хэше.

Взгляните на это:

http://ajaxpatterns.org/Unique_URLs