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

Этот вопрос аналогичен треку, когда пользователь нажимает кнопку в браузере , но не тот же … У меня есть решение, и я размещаю его здесь для справки и обратной связи. Если у кого-то есть лучшие варианты, я все уши!

Ситуация в том, что у меня есть страница с «редактированием на месте», a la flickr. Т.е. есть «нажмите здесь, чтобы добавить описание» DIV, который при щелчке превращается в TEXTAREA с кнопками «Сохранить» и «Отмена». Нажатие «Сохранить» сохраняет данные на сервере для обновления базы данных и помещает новое описание в DIV вместо TEXTAREA. Если страница обновлена, новое описание отображается в базе данных с опцией «click to edit». Довольно стандартный веб 2.0 материал в эти дни.

Проблема в том, что если:

  1. страница загружается без описания
  2. описание добавляется пользователем
  3. страница перемещается отсюда, нажав на ссылку
  4. пользователь нажимает кнопку «Назад»

Тогда то, что отображается (из кеша браузера), является версией страницы без динамически модифицированного DIV, содержащего новое описание.

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

Итак, возникает вопрос: как вы можете пометить страницу как измененную после ее загрузки, а затем определить, когда пользователь «вернется к ней», и заставить обновление в этой ситуации?

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

В вашем 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.

  • HTML 5 Favicon - поддержка?
  • Что делает «дружественный URL»?
  • Как открыть браузер по умолчанию в C #
  • Как отобразить PDF через веб-браузер Android без «загрузки» в первую очередь
  • В чем разница между «Normal Reload», «Hard Reload» и «Empty Cache and Hard Reload» в Chrome?
  • Не удается открыть браузер с Selenium после обновления Firefox
  • что происходит, когда вы вводите URL-адрес в браузере
  • Как скрыть запросы ajax с консоли firebug?
  • Как браузеры читают и интерпретируют CSS?
  • Как установить прокси для управления Webbrowser без использования прокси-сервера SYSTEM / IE
  • Программирование на Android: с чего начать создавать простой браузер файлов?
  • Давайте будем гением компьютера.