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

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

ВОПРОС:

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

УСИЛИЯ:

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

javascript browser-history html5-history
person Marshall Morrise    schedule 09.05.2019    source источник
comment
Если я правильно понял, я бы вызывал replaceState каждый раз, когда загружается новая глава, таким образом, если вы вернетесь, вы попадете на страницу книги.   -  person Jonas Grumann    schedule 09.05.2019

Ответы (3)


arrow_upward
1
arrow_downward

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

Таким образом, вы можете исправить это, сохранив страницы глав в массиве E.G.

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 во всех методах, затем вы можете выработать currentChapter из currentPage при загрузке страницы, что позволит выполнить обновление.

person Barkermn01    schedule 09.05.2019
comment
Спасибо, что нашли время ответить, @Martin Baker. У меня есть более простое решение, которое работает. Кажется, мое описание проблемы было не таким ясным, как могло бы быть. - person Marshall Morrise; 10.05.2019

arrow_upward
1
arrow_downward

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

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

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

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

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

person Limbo    schedule 09.05.2019
comment
Это помогло! Смотри ниже. - person Marshall Morrise; 10.05.2019

arrow_upward
1
arrow_downward

Вот что я в итоге сделал, спасибо 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, где приведен пример). Я передаю пустой объект, и он, кажется, работает. Второй параметр идентифицируется как «заголовок», который, согласно документации, может быть пустой строкой.

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

person Marshall Morrise    schedule 10.05.2019
comment
вы не должны использовать return false самостоятельно, до того, как вы вернете false, ваш sidewaysLink должен принять аргумент события sidewaysLink(evt), затем вы должны вызвать evt.preventDefault(); return false также останавливает распространение событий, тогда как с preventDefault() это не так. Чтобы узнать больше об этом, посетите geeksforgeeks. орг/ - person Barkermn01; 31.07.2019