浏览器后退按钮更改动态URL参数

Question

我正在一个网站上工作，其中url参数根据用户操作进行更新，根据该网站我更新网页而不刷新。 考虑电子商务的场景，当用户点击过滤器然后显示更新的产品时，网址会发生变化。

现在的问题是，当用户点击浏览器的后退按钮时，浏览器会返回上一个url-parameter，但页面没有被更改。 我想根据点击后退按钮后更改的url参数更改页面。

我试过这个解决方案：

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

这段代码的问题是，当url发生更改时会触发此问题，这意味着它不关心是否单击了浏览器后退按钮，或者是否使用jQuery更改了url。 因此，如果我根据用户交互更改URL，则将调用popstate回调并调用我的自定义函数。 要更新页面，我使用的是https请求，因此http api会被调用两次。

有没有办法检查是否只点击了“后退按钮”？

Answer 1

我建议您通过监听网址更改来更改您的设计并触发所有内容更新（在您的情况下为产品列表），而不仅仅是后退按钮引起的网址更改。 因此，不要触发对点击事件的任何重新呈现，而是让这些按钮定期链接到代表您的内容的URL并从popstate事件触发功能。

这就是所有MVVM框架（如Angular.js，Backbone等）的设计和使用方式。

通过这样做，您可以更容易地长期维护应用程序。

祝好运！