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

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

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

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

ВАЖНЫЙ!

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

1. пользователь посещает страницу 1.
2. а на странице 1 - он переходит по ссылке на страницу 2.
3. он перенаправлен на страницу2
4. сейчас (важная часть!) он нажимает кнопку "Назад" в браузере, потому что хочет вернуться на страницу 1
5. он вернулся на страницу 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 ). Но не думаю, что это лучшее решение.

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

• Работа с BFCache статья о MDN
• WebKit Page Cache II - Событие разгрузки от Брэди Эйдсона
• pageshow ссылка на событие на MDN
• Ajax, кнопка возврата и вопрос об обновлении DOM
• JavaScript - событие bfcache / pageshow - event.persisted всегда установлено значение false? вопрос

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

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

performance.navigation.type

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

Итак, чтобы узнать, была ли страница загружена из истории, используя back, вы можете сделать

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

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

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

1:Доступ к странице осуществляется нажатием кнопки «Обновить» или методом Location.reload ().

255: Любым другим путем

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

Примечание. Performance.navigation.type теперь устарел и заменен на PerformanceNavigationTiming.type, который возвращает 'navigate' / 'reload' / 'back_forward' / 'prerender': https://developer.mozilla.org/en-US/docs/Web / API / PerformanceNavigationTiming / тип

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

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

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

});

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

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

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

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

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

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

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

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

Поскольку performance.navigationтеперь не рекомендуется, вы можете попробовать следующее:

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

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

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

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

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

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

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

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

Таким образом, при первой загрузке страницы значение ввода будет «нет». Когда вы вернетесь на страницу, вы получите ответ «да», и ваш код JavaScript запустит обновление.

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

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

В настоящее время это самый современный способ перезагрузки страницы, если пользователь нажимает кнопку «Назад».

const [entry] = performance.getEntriesByType("navigation");

// Show it in a nice table in the developer console
console.table(entry.toJSON());

if (entry["type"] === "back_forward")
    location.reload();

См. Здесь источник

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

location.reload(true);

И поиск назад - это:

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

Используйте следующий метатег в вашем файле заголовка html, это работает для меня.

<meta http-equiv="Pragma" content="no-cache">

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

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

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

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

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

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

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

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