Как определить, попал ли пользователь на страницу с помощью кнопки «Назад»?

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

В вашем javascript вам понадобится следующее:

 var dirty_bit = document.getElementById('page_is_dirty'); if (dirty_bit.value == '1') window.location.reload(); function mark_page_dirty() { dirty_bit.value = '1'; } 

Js, который нюхает форму, должен выполнить после полного анализа html, но вы можете поместить как форму, так и строку js в начало страницы (js second), если пользовательская латентность является серьезной проблемой.

Вот очень простое современное решение этой старой проблемы.

 if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) { alert('Got here using the browser "Back" or "Forward" button.'); } 

window.performance в настоящее время поддерживается всеми основными браузерами.

Эта статья объясняет это. См. Код ниже: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

      Click for WebKit   

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

Первый этап решения – добавить на страницу следующее:

Содержимое fresh.html не имеет значения, поэтому достаточно:

Когда клиентский код обновляет страницу, необходимо изменить его следующим образом:

 function trigger_reload_if_user_clicks_back_button() { // "dis-arm" the reload stale page function so it doesn't fire // until the page is reloaded from the browser's cache window.reload_stale_page = function(){}; // change the IFRAME to point to a page that will reload the // page when it loads document.getElementById("page_is_fresh").src = "stale.html"; } 

stale.html выполняет всю работу: при загрузке он вызывает функцию reload_stale_page которая при необходимости reload_stale_page страницу. При первом загрузке (т. reload_stale_page функция reload_stale_page ничего не сделает).

Из моего (минимального) тестирования на этом этапе это, похоже, работает по своему желанию. Я что-то пропустил?

Вы можете использовать localStorage или sessionStorage ( http://www.w3schools.com/html/html5_webstorage.asp ), чтобы установить флаг (вместо использования скрытой формы).

Вы можете решить его с помощью события onbeforeunload :

 window.onbeforeunload = function () { } 

Используя эту страницу, особенно учитывая комментарий @sajith о ответе @Nick White и этой страницы: http://www.mrc-productivity.com/techblog/?p=1235

 
  
 $(function () { var date = new Date(); var time = date.getTime(); if ($("#reloadValue").val().length === 0) { $("#reloadValue").val(time); } else { $("#reloadValue").val(""); window.location.reload(); } }); 

Вот версия jQuery. Мне пришлось использовать его несколько раз из-за того, как рабочий стол / мобильный телефон Safari обрабатывает кеш, когда пользователь нажимает кнопку «Назад».

 $(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { // Loading from cache } }); 

Сегодня я столкнулся с подобной проблемой, и я решил ее с помощью localStorage (здесь с немного jQuery):

 $(function() { if ($('#page1').length) { // this code must only run on page 1 var checkSteps = function () { if (localStorage.getItem('steps') == 'step2') { // if we are here, we know that: // 1. the user is on page 1 // 2. he has been on page 2 // 3. this function is running, which means the user has submitted the form // 4. but steps == step2, which is impossible if the user has *just* submitted the form // therefore we know that he has come back, probably using the back button of his browser alert('oh hey, welcome back!'); } else { setTimeout(checkSteps, 100); } }; $('#form').on('submit', function (e) { e.preventDefault(); localStorage.setItem('steps', 'step1'); // if "step1", then we know the user has submitted the form checkOrderSteps(); // ... then do what you need to submit the form and load page 2 }); } if ($('#page2').length) { // this code must only run on page 2 localStorage.setItem('steps', 'step2'); } }); 

Si в основном:

На странице 1, когда пользователь отправляет форму, мы устанавливаем значение «шаги» в localStorage, чтобы указать, какой шаг пользователь предпринял. В то же время мы запускаем функцию с таймаутом, которая проверяет, было ли это значение изменено (например, 10 раз / секунду).

На странице 2 мы немедленно изменим указанное значение.

Поэтому, если пользователь использует кнопку «Назад», а браузер восстанавливает страницу 1 в точном состоянии, когда это было, когда мы ее оставили, функция checkSteps все еще работает и может обнаружить, что значение в localStorage было изменено (и может принимать соответствующие меры ). Как только эта проверка заполнит свою цель, нет необходимости продолжать ее запуска, поэтому мы просто больше не используем setTimeout.