Есть ли способ определить, появилась ли текущая страница с задней кнопки?
Я хочу загрузить данные из файла cookie только в том случае, если текущая страница появилась из кнопки "Назад".
Есть ли способ определить, появилась ли текущая страница с задней кнопки?
Я хочу загрузить данные из файла cookie только в том случае, если текущая страница появилась из кнопки "Назад".
Когда пользователь возвращает страницу, любые данные видимой формы сохраняются, а любые переменные JavaScript - reset. Я говорю "видимые" данные формы, поскольку скрытые поля, похоже, не сохраняются, но невидимые входы.
Вы можете использовать это в своих интересах, чтобы определить, была ли страница начальной загрузкой или уже была загружена ранее, например, нажатием кнопки "Назад".
Создайте невидимое поле ввода (а не тип "скрыто" ) со значением "0" и внутри проверки готовности DOM для проверки, установлено ли значение "1"; если он знает, что страница уже загружена, например, с помощью кнопки "Назад"; если он по-прежнему равен "0", сначала сначала загружается страница, задается значение "1".
Примечание. Это немного деликатно в том, как он работает, и, вероятно, не работает во всех браузерах; Я построил его с учетом Chrome.
.
<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>
if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
$('.formName').get(0).reset();
}
Для более простой проверки предусмотрены 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");
}
Я думаю, что это можно сделать с помощью 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');
}
По сути, вы не можете из-за ограничений браузера. HTML5 history API, событие onpopstate будет вызвано при переходе на обратную страницу. Но это сработает, даже если вы используете навигацию приложения.
см. альтернативное решение - Как определить событие кнопки "Назад" в браузере - Кросс-браузер
Используйте событие pagehow для обнаружения кнопок "назад" или "вперед":
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
Alert("User clicked on back button!");
}
});
Подробнее об этом можно узнать на странице 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();
}
});
Я выполнил эту задачу с помощью описанного выше трюка. Я добавил прослушиватель событий, который вызывается, когда кто-то возвращается на страницу с помощью кнопки "Назад" в браузере и на этом событии просто перезагружает страницу. Надеюсь, это поможет.