Как восстановить анимированную страницу jQuery в исходное состояние при посещении с помощью кнопки назад браузера? - PullRequest
2 голосов
/ 02 июня 2011

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

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

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

Я полагаю, что этого можно добиться путем принудительного обновления страницы при ее посещении с помощью кнопки «Назад» в браузере - хотя я могу ошибаться.Я был бы очень признателен за совет по этому поводу!

(Эта тема уже поднималась, но почему-то ни один из ответов, найденных на этом сайте, не решает проблему).

Ответы [ 2 ]

3 голосов
/ 03 июня 2011

Простое и элегантное решение этой проблемы нашел Шон Чин.Пожалуйста, смотрите это обсуждение: Кнопка браузера "Назад" против jQuery-анимированной страницы

2 голосов
/ 02 июня 2011

Для начала, ваш сайт, кажется, работает нормально в Chrome (без скрытого контента). Однако я вижу поведение, которое вы описываете при загрузке страницы в Firefox.

Однако, чтобы заставить вашу страницу «обновляться», вы можете в первую очередь предотвратить ее кеширование. Попробуйте добавить что-то вроде этого в раздел <head>.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

Действительно, эти заголовки должны быть отправлены с сервера. См. этот вопрос или этот вопрос .

Кроме того, вы можете проверить положение скрытого элемента div при загрузке страницы (в разделе $(document).ready()). Если это не так, как должно быть, перезагрузите страницу, используя location.reload();

Для вашего сайта что-то подобное должно работать.

window.onload = function() {
  if (document.getElementById("content").offsetParent.offsetTop < 0) { 
      location.reload(); }
  }

Обратите внимание, что на вашей странице должно быть только ОДИН window.onload или $(document).ready. Поэтому, если он у вас уже есть, просто поместите туда оператор if.

...