javascript - 浏览器后退按钮更改动态 url 参数

标签 javascript jquery angularjs back-button url-parameters

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

现在的问题是,当用户点击浏览器的后退按钮时,浏览器返回到之前的 url 参数,但页面没有改变。我还想根据单击后退按钮后更改的 url 参数更改页面。

我试过这个解决方案:

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

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

有什么方法可以检查是否只点击了“后退按钮”?

最佳答案

我建议您稍微更改一下设计并通过监听 url 更改触发所有内容更新(在您的案例中是产品列表),而不仅仅是后退按钮引起的 url 更改。因此,不要在点击事件上触发任何重新呈现,而是让这些按钮成为代表您的内容的 url 的常规链接,并从 popstate 事件触发功能。

这就是所有 MVVM 框架(如 Angular.js、Backbone 等)的设计和使用方式。

通过这样做,从长远来看,您也可以更轻松地维护应用程序。

祝你好运!

关于javascript - 浏览器后退按钮更改动态 url 参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33296325/

相关文章:

javascript - 显示 2 后在 slider 中显示 1 张图片

javascript - CSS 过渡以在单击时将点分页移动到左/右

javascript - 在每个 <img> 之前添加元素 <a>

jQuery 还是选择器?

javascript - AngularJs 如何确保代码同步执行

javascript - 如何用 jquery 返回 php json 数组对象?

javascript - 在 HTML 标题选项卡中传递 AJAX 响应

javascript - 当鼠标悬停在链接上时显示一个 div

javascript - 如何在 angularjs 中的两个单独的 Controller 中运行函数

javascript - AngularJS : Can Controller request external js on fly?