Как принудительно перезагрузить страницу при использовании кнопки "Назад назад"?

Мне нужно как-то обнаружить, что пользователь нажал кнопку возврата браузеров и перезагрузил страницу обновлением (перезагрузкой содержимого и CSS) с помощью jquery.

Как обнаружить такое действие через jquery?

Потому что сейчас некоторые элементы не перезагружаются, если я использую кнопку "Назад" в браузере. Но если я использую ссылки на веб-сайте, все обновляется и отображается правильно.

ВАЖНО!

Некоторые люди, вероятно, неправильно поняли, что я хочу. Я не хочу обновлять текущую страницу. Я хочу обновить страницу, загруженную после нажатия кнопки "Назад" . вот что я имею в виду более подробно:

  • пользователь посещает страницу1.
  • пока на стр. 1 - он нажимает на ссылку на страницу2.
  • он перенаправляется на страницу2
  • теперь (важная часть!) он нажимает кнопку "Назад" в браузере, потому что хочет вернуться на страницу1
  • он вернулся на страницу1 - и теперь страница1 перезагружается, и что-то предупреждается, как "Ты вернулся!"

ОТВЕТЫ

Ответ 1

Вы можете использовать событие pageshow для обработки ситуации, когда браузер переходит на вашу страницу через обход истории:

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // Handle page restore.
    window.location.reload();
  }
});

Обратите внимание, что HTTP-кеш тоже может быть задействован. Вам необходимо установить надлежащие HTTP-заголовки, связанные с кэшированием, на сервере, чтобы кэшировать только те ресурсы, которые необходимо кэшировать. Вы также можете выполнить принудительную перезагрузку в браузере instuct, чтобы игнорировать HTTP-кеш: window.location.reload( true ). Но я не думаю, что это лучшее решение.

Для получения дополнительной информации проверьте:

Ответ 2

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

Вы можете сделать проверку с

performance.navigation.type

Документация, включая поддержку браузера, находится здесь: https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

Чтобы увидеть, была ли страница загружена из истории с помощью back, вы можете сделать

if(performance.navigation.type == 2){
   location.reload(true);
}

2 указывает на то, что к странице обращались путем перехода в историю. Другие возможности are-

0: доступ к странице осуществлялся по ссылке, закладке, отправке формы или сценарию, либо путем ввода URL-адреса в адресной строке.

1: Доступ к странице осуществлялся нажатием кнопки "Перезагрузить" или методом Location.reload().

255: любым другим способом

Они подробно описаны здесь: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

Ответ 3

Просто используйте jquery:

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

Вышеуказанное будет работать на 100% при нажатии кнопки "Назад" или "вперед" с помощью ajax.

если этого не происходит, должна быть некорректная конфигурация в другой части script.

Например, он может не перезагружаться, если используется один из примеров в предыдущем сообщении window.history.pushState('', null, './');

поэтому, когда вы используете history.pushState(); убедитесь, что вы используете его правильно.

Предложение в большинстве случаев вам просто нужно:

history.pushState(url, '', url);

Нет window.history... и убедитесь, что URL определен.

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

Ответ 4

Вы должны использовать скрытый ввод в качестве индикатора обновления со значением "нет":

<input type="hidden" id="refresh" value="no">

Теперь, используя jQuery, вы можете проверить его значение:

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

Когда вы нажимаете кнопку "Назад", значения в скрытых полях сохраняют то же значение, что и при первоначальном выходе из страницы.

Итак, при первом загрузке страницы входное значение будет "no". Когда вы вернетесь на страницу, это будет "да", и ваш код JavaScript вызовет обновление.

Ответ 5

Поскольку performance.navigation устарела, вы можете попробовать это:

var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}

Ответ 6

Перезагрузка проста. Вы должны использовать:

location.reload(true);

И обнаружение назад:

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});

Ответ 7

Я нашел лучший ответ, и он отлично работает для меня.

просто используйте этот простой script в своей ссылке

<A HREF="javascript:history.go(0)">next page</A>

или событие нажатия кнопки

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

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

Я использовал его в качестве входа в CAS и даю мне то, что хочу. Надеюсь, это поможет.......

подробности найдены здесь

Ответ 8

Альтернатива, которая решила проблему для меня, - отключить кеш для страницы. Это заставляет браузер получать страницу с сервера вместо использования кэшированной версии:

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

Ответ 9

Лучший способ - установить тайм-аут с помощью jquery.

function explode(){
  alert("YOUR RELOAD PAGE HERE!");
}
setTimeout(explode, 1);

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

Я использую его без проблем.