"Аякс", кнопки "назад" и обновления дом

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

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

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

откуда берется непоследовательность?

7 108
javascript ajax firefox

7 ответов:

один ответ: Между прочим, события выгрузки приводят к тому, что кэш back/forward становится недействительным.

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

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

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

104

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

12

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

3

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

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

3

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

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

2

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

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

1

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

когда вы изменяете состояние назад с JS,то вы обновляете данные в # url.

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

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

http://ajaxpatterns.org/Unique_URLs

0