Перемещение "вбок" по страницам браузера без добавления в историю браузера

Question

• На странице книги пользователь нажимает Глава 1 в оглавлении.
• На странице главы 1 пользователь нажимает Следующая глава чтобы перейти к главе 2.
• Пользователь может нажимать Следующая глава любое количество раз для перемещения по главам.
• На любой странице главы, если пользователь нажимает на кнопкуКнопка Назад , пользователь должен вернуться на страницу книги, а не на ранее просмотренную страницу главы.Другими словами, перемещение по страницам главы является своего рода «боком» без добавления в стек истории браузера.

ВОПРОС:

Какой Javascript должен быть выполнен, когда Следующая главаНажмите , чтобы эффективно удалить страницу текущей главы из истории браузера, а затем перейти на страницу новой главы, чтобы стек истории выглядел так, как будто пользователь зашел на страницу новой главы со страницы книги?

EFFORTS:

• Я прочитал несколько постов и прочитал документацию, особенно документ Mozilla по управлению историей браузера.
• Я пытался вызвать историю вызовов.back () (для извлечения текущей записи), после чего следует переход к следующей главе, но текущая глава просто остается в истории, поэтому я возвращаюсь к ней, когда нажимаю кнопку Назад.
• IЯ пробовал history.replaceState (), но это, похоже, не помогает.
• Кажется, что мне нужно что-то вроде history.popState (), за которым следует продолжитьперейдем к следующей главе.
• Я уверен, что мне не хватает какого-то простого, ключевого ингредиента.

Answer 1

Итак, насколько я понимаю, вы не можете использовать объект истории, потому что, если они перепрыгнут через главу и нажмут кнопку «Назад», они вернутся туда, где были, прежде чем перейти на страницу назад, а не назад на страницу.

Так чтоЧтобы исправить это, нужно сохранить страницы глав в массиве EG

let currentPage = 0;
let currentChapter = 0;
let totalPages = 97;
let chapters = [0,3,25,51,63]

let nextPage = () => {
    if(currentPage+1 > totalPages) return;
    currentPage++;
    if(currentPage > chapters[currentChapter]){
        currentChapter++;
    }
}
let prevPage = () => {
    if(currentPage == 0) return;
    currentPage--;
    if(currentPage < chapters[currentChapter]){
        currentChapter--;
    }
}
let nextChapter = () => {
    if(currentChapter+1 > chapters.length) return;
    currentChapter++;
    currentPage = chapters[currentChapter]
}
let previusChapter = () => {
    if(currentChapter == 0) return;
    currentChapter--;
    currentPage = chapters[currentChapter]
}

. Таким образом, вы можете использовать pushState для изменения URL-адреса на основе currentPage в sll методов, а затем вы можетеcurrentChapter при загрузке страницы currentPage это позволит выполнить обновление.

Answer 2

Вот что я в итоге сделал, спасибо за вдохновение от Limbo.Событие onclick из следующей или предыдущей ссылки вызывает эту функцию:

function sidewaysLink()
{
    history.replaceState({}, "", this.getAttribute("href"));
    history.go(0);
    return false;
}

Не уверен, почему мне потребовалось столько грубых ошибок, чтобы понять это.Операция проста: history.replaceState() заменяет запись в верхней части стека браузера, а history.go(0) переходит к этой верхней записи.return false не дает браузеру действовать по ссылке при возврате.

Я не знаю, каким должен быть первый параметр history.replaceState ().Он идентифицируется как «объект состояния» (см. https://developer.mozilla.org/en-US/docs/Web/API/History_API,, в котором приведен пример).Я передаю пустой объект, и он, кажется, работает.Второй параметр обозначается как «заголовок», который, как говорится в документации, может быть пустой строкой.

Рад услышать от любого, кто видит недостаток в этом подходе или кто может предложить улучшение.Кажется, работает хорошо.

Answer 3

Я рекомендую вам использовать history пакет.

Ваш код будет выглядеть как

import { createBrowserHistory } from "history"
const history = createBrowserHistory()

Тогда для Следующая глава выбудет использовать history.replace("/url/to/your/next/chapter").Если пользователь переходит к первой главе со страницы книги, то каждая следующая глава заменяет текущее местоположение, что означает, что предыдущее местоположение будет обозначено как Книга .Это означает, что для Back вы будете использовать history.goBack().

Надеюсь, это поможет!