Кнопка «Назад браузера» изменяет динамический url Параметры

Question

Я работаю над веб-сайтом, где параметр url обновляется на основе действия пользователя, в соответствии с которым я обновляю веб-страницу без обновления. Рассмотрите сценарий электронной коммерции, где URL-адрес изменяется, когда пользователь нажимает на фильтры, и затем отображаются обновленные продукты.

Теперь проблема в том, что когда пользователь нажимает кнопку «Назад» браузера, браузер возвращается к предыдущему параметру url, но страница не изменилась. Я хочу изменить страницу также на основе параметра url, который изменяется после нажатия кнопки «Назад».

Я попытался это решение:

$($window).on('popstate', function (e) { 
    // Update the page also 
}); 

Проблема этого кода, это увольняют как изменения URL-адрес, означает, что он не заботится о том, если браузер назад кнопка нажата, или URL-адрес меняется с помощью JQuery. Поэтому, если я изменяю url на основе взаимодействия с пользователем, будет вызван обратный вызов popstate и моя пользовательская функция. Чтобы обновить страницу, я использую https-запросы, поэтому HTTP api вызывается два раза.

Есть ли способ проверить, нажата ли только кнопка «Назад»?

Answer 1

Я бы порекомендовал вам изменить свой дизайн на бит litle и инициировать все обновления контента (список продуктов в вашем случае), прослушивая изменения url, а не только изменения URL-адреса, вызванные кнопкой «Назад». Поэтому вместо того, чтобы запускать любой повторный рендеринг при событиях кликов, пусть эти кнопки являются регулярной ссылкой на URL-адрес, который представляет ваш контент и запускает функциональность из всплывающего события.

Вот как все MVVM-каркасы, такие как Angular.js, Backbone и т. Д., Спроектированы и предназначены для использования.

Делая это, вам будет намного проще поддерживать приложение в долгосрочной перспективе.

Удачи вам!