Возвращаясь к записи pushState, которая использовала ajax - PullRequest
Новая
       7

Возвращаясь к записи pushState, которая использовала ajax

15 голосов
/ 10 июня 2011

У меня проблема со следующей ситуацией.

  1. Пользователь посещает сайт
  2. Пользователь нажимает ссылку, которая использует history.pushState для обновления URL
  3. Частичное содержимое страницы, загруженное через ajax (с использованием jQuery)
  4. Пользователь нажимает обычную ссылку, которая загружает новую страницу
  5. Пользователь нажимает назад, чтобы вернуться к записи pushState
  6. Страница теперь отображаетсятолько часть страницы, которая была получена через ajax

Я создал сайт, использующий pushState для различных вещей, и в результате получилось потрясающе отзывчивое веб-приложение, но эта проблема не позволяет мне использовать это.

Вот пример кода: 

$('a').live('click', function(){
  history.pushState({}, '', this.href);
  popstate(this.href);
  return false;
});

popstate = function(url){
  $('#content').load(url);
}
window.onpopstate = function(event){
  popstate(window.location.href);
  event.preventDefault();
}

Примечания:

  • При размещении предупреждения в функции window.onpopstate появляется сообщение, что событие НЕ являетсясрабатывает на шаге 5. Это ошибка?
  • Эта проблема возникает только при использовании ajax.
  • Мне пришлось отделить функцию popstate, чтобы я мог вызывать ее после pushState.Есть ли способ вручную вызвать событие window.onpopstate?

1 Ответ

19 голосов
/ 27 июля 2011

Похоже, что некоторые браузеры часто путают частичку, загружаемую через ajax, и всю страницу, украшенную ее макетом.Это потому, что они оба имеют одинаковый URL.Поэтому, когда пользователь нажимает кнопку «Назад», браузер не загружает URL-адрес и просто отображает часть, которую он ранее загрузил через ajax.

Чтобы избежать этого и поддерживать два отдельных внутренних кэша (один длячастичная страница и одна для всей страницы), вы должны добавить параметр GET в URL при вызове через ajax.Вот как в вашем коде: 

popstate = function(url){
  $('#content').load(url+'?_ajax=1');
}

Надеюсь, это поможет.

...