JS метод History.back()

Загальний опис

Метод back() є частиною об'єкта History, який є вбудованим у веб-браузери та відіграє ключову роль у навігації веб-сторінок. Цей метод дозволяє користувачам повертатися на один крок назад у історії перегляду веб-сторінок, що є аналогічно дії кнопки "Назад" у веб-браузері. Основна суть методу back() полягає у можливості програмного управління історією перегляду, що надає розробникам веб-додатків гнучкість у керуванні навігацією користувача.

Метод back() може бути особливо корисним у розробці односторінкових додатків (Single Page Applications, SPA), де управління історією перегляду є важливим аспектом для створення інтуїтивно зрозумілого користувацького досвіду. Наприклад, після завершення дій, таких як заповнення форми або завершення покупки, метод back() може бути використаний для повернення користувача до попередньої сторінки, замість того, щоб вимагати від них вручну натискати кнопку "Назад" у браузері.

Простий приклад застосування методу back() може виглядати так:

function goBack() {
    window.history.back();
}

У цьому прикладі, функція goBack() викликає метод back() об'єкта history, який належить глобальному об'єкту window. Це призводить до того, що користувач повертається на одну сторінку назад у історії свого браузера.

У більш складних випадках, метод back() може бути інтегрований у функціональність веб-додатків, наприклад, для відновлення попереднього стану додатка після виконання певних дій. Це може бути реалізовано шляхом поєднання back() з іншими методами об'єкта history, такими як pushState() або replaceState(), які дозволяють модифікувати історію перегляду без перезавантаження сторінки.

Наприклад:

function submitForm() {
    // Логіка обробки форми
    // ...

    // Додаємо стан в історію
    window.history.pushState({page: "formSubmitted"}, "Title", "/submitted");

    // Після деякого часу, повернутися назад
    setTimeout(() => {
        window.history.back();
    }, 3000);
}

У цьому прикладі, після обробки форми, стан "formSubmitted" додається до історії браузера. Через 3 секунди, за допомогою методу setTimeout, викликається history.back(), що повертає користувача на попередню сторінку.

Однак, важливо зазначити, що використання методу back() повинно бути розумним та обдуманим. Необдумане його застосування може призвести до збентеження користувача, якщо поведінка навігації не буде очікуваною або інтуїтивно зрозумілою.

Підсумовуючи, метод back() є потужним інструментом у руках веб-розробників, що дозволяє створювати більш динамічні та інтерактивні веб-додатки. Його правильне використання може значно покращити навігацію та користувацький досвід на веб-сайті.

правити

Порада

Метод history.back() можна використовувати для створення навігації в межах односторінкових додатків (SPA). Використання цього методу дозволяє користувачам повертатися на попередню сторінку без перезавантаження всього додатку. Це покращує користувацький досвід, адже забезпечує швидше відображення контенту та збереження стану додатку.

автор: Bond правити

Порада

При використанні history.back() важливо враховувати, що користувач може потрапити на ваш сайт із зовнішнього посилання. У такому випадку, метод поверне користувача на ту сторінку, з якої він прийшов, що може бути не завжди бажано. Тому перед використанням цього методу рекомендується перевірити історію перегляду.

автор: Bond правити

Порада

Якщо у вашому додатку є необхідність реалізувати кнопку "Назад", краще використовувати метод history.back(), ніж пряме посилання. Це дозволить користувачам повернутися до попередньої активності з урахуванням їхньої взаємодії на сайті, що створює більш інтуїтивний та зручний користувацький інтерфейс.

автор: Bond правити

Порада

У складних додатках, де навігація відіграє ключову роль, можливо потрібно буде зберегти додаткову інформацію про сторінки, які відвідував користувач. У цьому випадку, крім використання history.back(), може знадобитися використання додаткових методів history API для точного контролю навігації та збереження стану додатку під час переходів між сторінками.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

back()

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

function goBack() {
  window.history.back();
}

function safeGoBack() {
  if (window.history.length > 1) {
    window.history.back();
  } else {
    console.log("Історія перегляду порожня, немає куди повертатися.");
  }
}