Обнаружить, если страница загружается из кнопки "Назад"

Ответ 1

Когда пользователь возвращает страницу, любые данные видимой формы сохраняются, а любые переменные JavaScript - reset. Я говорю "видимые" данные формы, поскольку скрытые поля, похоже, не сохраняются, но невидимые входы.

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

Создайте невидимое поле ввода (а не тип "скрыто" ) со значением "0" и внутри проверки готовности DOM для проверки, установлено ли значение "1"; если он знает, что страница уже загружена, например, с помощью кнопки "Назад"; если он по-прежнему равен "0", сначала сначала загружается страница, задается значение "1".

Примечание. Это немного деликатно в том, как он работает, и, вероятно, не работает во всех браузерах; Я построил его с учетом Chrome.

• DOM необходимо загрузить; не все готовые функции работают. Тот самый ниже, так же готов JQuery; однако (function() {}) в моем экземпляре нет.
• Ввод не может иметь тип = "скрытый". Set style = "display: none;" на входе.

.

<input id="backbuttonstate" type="text" value="0" style="display:none;" />
<script>
document.addEventListener('DOMContentLoaded', function () {
   var ibackbutton = document.getElementById("backbuttonstate");
   if (ibackbutton.value == "0") {
     // Page has been loaded for the first time - Set marker
     ibackbutton.value = "1";
     alert('First time load');
   } else {
     // Back button has been fired.. Do Something different..
     alert('Previously loaded - Returned from Back button');
   }
}, false);
</script>

Ответ 2

 if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
        $('.formName').get(0).reset();
    }

Ответ 3

Для более простой проверки предусмотрены API-интерфейс Navigation Timing (уже устарел, но широко поддерживается) и API-интерфейс Navigation Timing Level 2 (рабочий проект, поддерживаемый основным браузером).

if (window.performance) {
     var navEntries = window.performance.getEntriesByType('navigation');
     if (navEntries.length > 0 && navEntries[0].type === 'back_forward') {
          console.log('As per API lv2, this page is load from back/forward');
     } else if (window.performance.navigation
          && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
          console.log('As per API lv1, this page is load from back/forward');
     } else {
          console.log('This is normal page load');
     }
} else {
     console.log("Unfortunately, your browser doesn't support this API");
}

Ответ 4

Я думаю, что это можно сделать с помощью sessionStorage, если вы работаете со страницами в своем проекте (это не учитывает внешние страницы). Вне моей головы, когда вы находитесь на "главной странице", то вы нажимаете ссылку и переходите на следующую страницу.

На этой следующей странице вы можете установить значение в sessionStorage, например:

sessionStorage.setItem('doSomething', 'yes');

Затем вернитесь на главную страницу, и у вас может возникнуть такое состояние:

const sCheckSession = sessionStorage.getItem('doSomething');
if(sCheckSession == 'yes') {
  // do something crazy, then reset your reference to no
  // so it wont interfere with anything else
  sessionStorage.setItem('doSomething', 'no');
}

Ответ 5

По сути, вы не можете из-за ограничений браузера. HTML5 history API, событие onpopstate будет вызвано при переходе на обратную страницу. Но это сработает, даже если вы используете навигацию приложения.

см. альтернативное решение - Как определить событие кнопки "Назад" в браузере - Кросс-браузер

Ответ 6

Используйте событие pagehow для обнаружения кнопок "назад" или "вперед":

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        Alert("User clicked on back button!");
    }
});

Подробнее об этом можно узнать на странице pageshow в разделе здесь.

Ответ 7

Это сработало для меня, я добавил этот код внизу страницы.

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();
  }
});

Я выполнил эту задачу с помощью описанного выше трюка. Я добавил прослушиватель событий, который вызывается, когда кто-то возвращается на страницу с помощью кнопки "Назад" в браузере и на этом событии просто перезагружает страницу. Надеюсь, это поможет.