javascript - можно ли использовать target.location.href события onpopstate для изменения содержимого страницы? - PullRequest
Новая
       5

javascript - можно ли использовать target.location.href события onpopstate для изменения содержимого страницы?

0 голосов
/ 14 марта 2020

Я пытаюсь обновить URL, не обновляя страницу, сохраняя возможность использовать кнопки браузера «назад» и «вперед». Я использую эту логику c { ссылка }, но у меня есть некоторые проблемы.

Когда я загружаю страницу, я немедленно выполняю этот код: 

window.onpopstate = function (e) {
    if (e.state) {
        changeStep(e.state.step);
    }
};

changeStep - это просто функция, которая отображает правильный контент на основе URL.

И всякий раз, когда я меняю страницу, я вызываю эту функцию: 

function updateUrl(step, url){
    window.history.pushState({"step": step}, "", url);
}

Теперь дело в том, что первая страница не получить, когда я нажимаю кнопку назад. URL обновляется, но не содержимое страницы. И именно поэтому, когда обрабатывается событие onpopstate, событие e не имеет атрибута состояния. Это связано с тем, что при первой загрузке страницы она не выводит состояние sh. Но если я делаю это, поэтому, если я вызываю updateUrl, когда страница загружается, у меня возникает другая проблема, когда я начинаю go в обратном направлении (через кнопку возврата браузера), чтобы проверить правильность поведения, первая страница загружается дважды, первый раз с состоянием атрибута внутри события, а второй и последний раз без него. Другими словами, у меня все еще есть та же проблема.

Но я заметил еще одну вещь, у события onpopstate есть также свойство target, которое, в свою очередь, содержит location.href, который является URL-адресом целевого объекта. стр. Основываясь на этом URL, я могу понять, какой контент мне нужно отображать на этой конкретной странице.

Так что мой вопрос в том, что мне не нужны никакие конкретные данные, хранящиеся в свойстве state, но единственное, что мне нужно для обновления содержимого страницы, это целевой URL, могу ли я просто игнорируйте свойство state события onpopstate и go прямо с target.location.href? Есть ли какой-нибудь возврат? Может быть, в конкретном случае, когда это не работает?

Код будет выглядеть следующим образом 

window.onpopstate = function (e) {
    if (e.target && e.target.location && e.target.location.href) {
        changeStep(e.target.location.href);
    }
};

Мне даже не нужно устанавливать состояние при первой загрузке страницы.

1 Ответ

1 голос
/ 14 марта 2020

Вы можете обновить первое состояние, используя history.replaceState() при загрузке страницы. Это сохранит прежний URL, но добавит state к начальной странице.

Теперь у вас не будет проблемы с возвратом дважды: один с объектом state и один без. 

window.addEventListener('load', function(event) {
  let step = 0;
  history.replaceState({ step }, '');
});
...