Як змусити перезавантажити сторінку при використанні кнопки повернення браузера?

Мені потрібно якось виявити, що користувач натиснув кнопку повернення браузера, і перезавантажити сторінку з оновленням (перезавантаження вмісту та 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 II - подія вивантаження Брейді Ейдсоном
• посилання на подію сторінок на MDN
• Ajax, кнопка "Назад" та запитання про оновлення DOM
• JavaScript - bfcache / pagehow event - 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 / type

Просто використовуйте 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 і дає мені те, що я хочу. Сподіваюся, це допоможе .......

деталі знайдено звідси