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

Синтаксис

back()

Параметри

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2

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

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