Ajax, кнопка возврата и обновления DOM
Если javascript изменяет DOM на странице A, пользователь переходит на страницу B, а затем нажимает кнопку "Назад", чтобы вернуться на страницу A. Все изменения в DOM на странице A теряются, и пользователю предоставляется версия, которая была первоначально получена с сервера.
Так работает на stackru, reddit и многих других популярных сайтах. (попробуйте добавить тестовый комментарий к этому вопросу, затем перейдите на другую страницу и нажмите кнопку "Назад", чтобы вернуться - ваш комментарий будет "пропал")
Это имеет смысл, однако некоторые веб-сайты (apple.com, basecamphq.com и т. Д.) Каким-то образом заставляют браузер обслуживать пользователя по последнему состоянию страницы. (перейдите по http://www.apple.com/ca/search/?q=ipod, нажмите ссылку "Загрузки" вверху, а затем нажмите кнопку "Назад" - все обновления DOM будут сохранены)
откуда исходит несоответствие?
7 ответов
Один ответ: среди прочего, события выгрузки приводят к тому, что кэш назад / вперед становится недействительным.
Некоторые браузеры хранят текущее состояние всей веб-страницы в так называемом "bfcache" или "page cache". Это позволяет им очень быстро перерисовывать страницу при навигации с помощью кнопок "назад" и "вперед" и сохраняет состояние DOM и всех переменных JavaScript. Однако, когда страница содержит события onunload, эти события могут потенциально привести страницу в нерабочее состояние, и поэтому страница не сохраняется в bfcache и должна быть перезагружена (но может быть загружена из стандартного кэша) и повторно с нуля, включая запуск всех обработчиков загрузки. При возврате на страницу через bfcache DOM сохраняется в своем предыдущем состоянии без необходимости запуска обработчиков загрузки (поскольку страница уже загружена).
Обратите внимание, что поведение bfcache отличается от стандартного кэша браузера в отношении Cache-Control и других заголовков HTTP. Во многих случаях браузеры будут кэшировать страницу в bfcache, даже если она не сохранит ее в стандартном кэше.
jQuery автоматически присоединяет событие unload к окну, поэтому, к сожалению, использование jQuery лишит вашу страницу права на сохранение в bfcache для сохранения DOM и быстрого возврата / пересылки, [Обновление: это было исправлено в jQuery 1.4, так что это относится только к IE]
- Информация о Firefox bfcache
- Информация о кэше страниц Safari и возможных будущих изменениях работы событий выгрузки
- Opera использует быструю навигацию по истории
- Chrome не имеет кеша страниц ( [1], [2])
- Страницы для игры с DOM-манипуляциями и bfcache:
Я пытался заставить Chrome вести себя так, как Safari, и единственный способ, который я нашел, это установить Cache-control: no-store в заголовках. Это заставляет браузер повторно загружать страницу с сервера, когда пользователь нажимает кнопку "Назад". Не идеально, но лучше, чем показ устаревшей страницы.
Facebook запоминает состояние страницы, изменяя хеш-идентификатор в URL для запросов ajax. Эти изменения записываются в историю браузера, поэтому, когда пользователь нажимает кнопку "Назад", хэш меняется на прежний. Таким образом, подразумевается, что вам понадобится Javascript для отслеживания идентификатора has и реагирования на его изменение браузером. Andreas Blixt имеет скрипт мониторинга хеша.
Это не имеет ничего общего с символом хеша (#).
Если вы хотите проверить HTTP-заголовки Apple, это просто кэширование страницы.
Использование идентификатора хеша / фрагмента URL - довольно распространенный способ перехватить / запомнить состояние в веб-приложении, которое использует обновления Ajax и DOM.
Посмотрите проект " Действительно простая история " для некоторых идей. Можно отслеживать URL-адреса на предмет изменений в хэше, и rsh делает это с учетом различий браузера.
Для тех, кто работает в проблемах с Rails и это - ваша проблема не bfcache (я думал, что это было) - это turbolinks драгоценный камень. Вот как это убрать.
Надеюсь, это сэкономит вам время и ударит головой о стену.
То, что вы ищете, для некоторого типа управления хэшем URL. # В URL предназначен только для клиентской части.
Когда вы изменяете состояние спины с помощью JS, вы обновляете данные в # URL-адреса.
Также вы добавляете какой-либо тип опроса, который отслеживает, изменился ли хеш, и загружает состояние страницы на основе новых данных в хэше.
Взгляните на это: