AJAX navigation + window.history.pushState: кнопка «Назад» в браузере не работает - PullRequest
Новая
       17

AJAX navigation + window.history.pushState: кнопка «Назад» в браузере не работает

0 голосов
/ 07 февраля 2020

Я создал инструмент Javascript litte для поддержки частичной загрузки содержимого на сайте Plone через AJAX (глобальный AjaxNav объект, содержащий все функции). Конечно, я бы хотел, чтобы история браузера (кнопки «назад» и «вперед») работала, поэтому у меня есть следующая маленькая функция: 

   var set_base_url = function (url) {  // important for local links (hash only)
        var head=null,
            base=$('html base').first();
        if (base) {
            base.attr('href', url);
            log('set base[href] to '+url);
        } else {
            $(document).add('<base>').attr('href', url);
            log('created <base> and set href to '+url);
        }

   var history_and_title = function (url, title, data) {
        var stateObj = {  // can be anything which is serializable, right?
            cnt: increased_state_counter()
            };
        if (typeof data.uid !== 'undefined') {
            stateObj['uid'] = data.uid;
        }
        if (title) {
            if (AjaxNav.options.development_mode) {
                title = '(AJAX) ' + title;
            }
            document.title = title;
        }
        if (url) {
            set_base_url(url);
            window.history.pushState(stateObj, '', url);
        } else {
            window.history.pushState(stateObj, '');
        }
    };
    AjaxNav.history_and_title = history_and_title;

Эта функция вызывается и не выдает никаких ошибок (я не смог пятно, как минимум); но когда я пытаюсь go вернуться, нажав кнопку браузера "назад" или нажав клавишу backspace, меняется только видимый URL-адрес, но содержимое не перезагружается. Я бы согласился с перезагрузкой полной страницы, но, конечно, перезагрузка страниц из истории через AJAX была бы еще лучше.

Есть ли очевидная ошибка?

все это немного длинновато (~ 850 строк, в настоящее время), потому что часто нет способа узнать, указывает ли целевой URL объект или его метод представления; таким образом, я пробую до двух UR для каждой гиперссылки, а затем выполняю обработку (заменяя содержимое, устанавливая заголовок, event.preventDefault () и т. п.), или просто возвращаю true, чтобы загрузить страницу целиком.

1 Ответ

1 голос
/ 07 февраля 2020

Отсутствует прослушиватель событий popstate. В то время как pushState отправляет новую запись истории в коллекцию, нажатие кнопки "Назад" приведет к pop состоянию из коллекции истории. Так же, как с массивом. Событие popstate установлено для объекта window и имеет доступ к объекту state, установленному в функции pushState.

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

Попробуйте приведенный ниже фрагмент кода и посмотрите, что он выводит. 

window.addEventListener('popstate', event => {
   const { state } = event;
   console.log(state);
});
...