JS метод History.go()

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

Метод go() відіграє фундаментальну роль у маніпулюванні історією перегляду в контексті JavaScript. Він є частиною об'єкта History, який надає інтерфейс для взаємодії з історією сесії веб-браузера. Метод go() дозволяє переміщуватися вперед або назад у історії перегляду на вказану кількість кроків, що забезпечує велику гнучкість у навігації між сторінками. Ця можливість важлива для створення плавного та зручного користувацького досвіду, особливо у складних веб-додатках та SPA (Single Page Applications).

go() може бути використаний для повернення користувача до певної сторінки у історії перегляду, базуючись на її відносній позиції. Метод приймає один параметр: ціле число, яке визначає кількість кроків для переміщення. Позитивне число означає переміщення вперед, негативне — назад, а нуль викликає перезавантаження поточної сторінки.

Основне застосування методу go() — це навігація в історії браузера без необхідності використання стандартних кнопок браузера "Назад" та "Вперед". Це особливо корисно у випадках, коли потрібно керувати переходами користувача у веб-додатку, наприклад, при переході між різними частинами додатку або при відображенні модальних вікон.

Для базового використання метод go() може бути викликаний безпосередньо з об'єкта history, який доступний через глобальний об'єкт window. Наприклад:

function navigate(steps) {
    window.history.go(steps);
}

У цьому коді, функція navigate() приймає кількість кроків як параметр та використовує go() для переміщення в історії на вказану кількість кроків.

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

function performActions() {
    // Логіка виконання дій
    // ...

    // Повернення на 2 кроки назад
    window.history.go(-2);
}

У цьому прикладі, після виконання певних дій, користувач може бути повернутий на дві сторінки назад у історії браузера.

Важливо пам'ятати, що неправильне використання методу go() може призвести до збивання користувачів із пантелику, особливо якщо переміщення в історії не відповідає очікуванням користувача або є занадто складним для розуміння.

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

правити

Порада

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

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

Порада

Перед використанням history.go() важливо переконатися, що в історії браузера є достатня кількість сторінок для вказаного переміщення. Якщо кількість сторінок для переміщення перевищує кількість доступних сторінок у історії, метод не матиме жодного ефекту.

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

Порада

Пам'ятайте, що history.go(0) може бути використаний для перезавантаження поточної сторінки. Це може бути корисно, коли потрібно оновити вміст сторінки без повного перезавантаження браузера.

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

Порада

Використовуючи history.go() у веб-додатках, які використовують динамічне завантаження контенту, важливо забезпечити, що стан додатка належним чином оновлюється при кожному переміщенні в історії. Це допоможе уникнути неконсистентності між відображеним контентом та фактичним станом історії.

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

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

Синтаксис

go()
go(delta)

Параметри

delta

Позиція в історії, на яку потрібно перейти відносно поточної сторінки.

Від'ємне значення переміщує назад, додатне - вперед. Наприклад, history.go(2) перемістить користувача на дві сторінки вперед, а history.go(-2) - на дві сторінки назад. Якщо значення не вказане або delta дорівнює 0, ефект буде таким самим, як при виклику location.reload().

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

function goToPage(steps) {
  // Перевірка, чи є достатньо записів у історії для переходу
  if (Math.abs(steps) < window.history.length) {
    window.history.go(steps);
  } else {
    console.log("Запропонована кількість кроків перевищує історію браузера.");
  }
}

// Перехід на дві сторінки назад
goToPage(-2);

// Перехід на три сторінки вперед
goToPage(3);

// Повернення на одну сторінку назад
function goBackOnePage() {
  window.history.go(-1);
}

// Перехід на одну сторінку вперед
function goForwardOnePage() {
  window.history.go(1);
}