Мне нужно каким-то образом определить, что пользователь нажал кнопку возврата в браузере, и перезагрузить страницу с обновлением (перезагрузка содержимого и CSS) с помощью jquery.
Как обнаружить такое действие через jquery?
Потому что сейчас некоторые элементы не перезагружаются, если я использую кнопку «Назад» в браузере. Но если я использую ссылки на сайте, все обновляется и отображается правильно.
ВАЖНЫЙ!
Некоторые люди, вероятно, неправильно поняли, чего я хочу. Я не хочу обновлять текущую страницу. Я хочу обновить страницу, загружаемую после нажатия кнопки «Назад». вот что я имею в виду более подробно:
- пользователь посещает страницу 1.
- а на странице 1 - он переходит по ссылке на страницу 2.
- он перенаправлен на страницу2
- сейчас (важная часть!) он нажимает кнопку "Назад" в браузере, потому что хочет вернуться на страницу 1
- он вернулся на страницу 1 - а теперь страница 1 перезагружается, и появляется предупреждение вроде «Вы вернулись!»
javascript
jquery
browser
browser-cache
page-refresh
Джон Дохерский
источник
источник
onнаoff. И все нормально, в db сохраняется, пользователи все правильно видят. Теперь он нажимает на другую ссылку. Например, страница о нас, правда? Теперь он на странице о нас. Бе решает вернуться на предыдущую страницу и нажимает кнопку «Назад» в браузере. И когда он вернулся, он видит изменения на странице, поскольку браузер показывал страницу (вероятно, некоторое отключение браузера) до того, как он запустил ajax (включение / выключение классов)$.ajax({ url: url, method: 'post', processData: false, contentType: false, cache: false, dataType: 'json', data: formData, })Как вы думаете, это может быть с помощью ajax? было бы здорово, если бы это было так.Ответы:
Вы можете использовать
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 ). Но не думаю, что это лучшее решение.Для получения дополнительной информации проверьте:
источник
window.addEventListener( "unload", function() {} );но ничего не делает, кнопка назад работает, как и раньше, никаких изменений; (window.addEventListener( "unload", function() {} );не работает. Это полная?pageshowрешение.$(document).ready( function() { /* code here */ });window.performance.navigationустарел. Чтобы проверить тип навигации, который я использовалwindow.performance.getEntriesByType("navigation")[0].type === "back_forward"Прошло некоторое время с тех пор, как это было опубликовано, но я нашел более элегантное решение, если вам не нужно поддерживать старые браузеры.
Вы можете сделать проверку с помощью
Документация, включая поддержку браузера, находится здесь: 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");источник
Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetMaxAge(TimeSpan.Zero); Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); Response.Cache.SetNoStore();В настоящее время это самый современный способ перезагрузки страницы, если пользователь нажимает кнопку «Назад».
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); });источник
alert('test');вместо этого,location.reload(true);но все еще ничего. Я пробовал firefox и chrome, но ничего. Я пробовал готов внутри документа, снаружи, но ничего не работает. Если я попробую простое предупреждение () или любой код jquery, который работает. Я у меня на странице много jquery-кода, и он работаетИспользуйте следующий метатег в вашем файле заголовка 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 и дает мне то, что я хочу. Надеюсь, поможет .......
источник