如果没有发出任何http请求和只有jQuery,这个网站如何更改网址?

时间:2015-07-31 15:39:30

标签: javascript client url-routing

点击此链接:

http://www.mensfitness.com/nutrition/what-to-eat/top-10-energy-boosting-foods-and-drinks/slide/8

请注意,当您点击幻灯片上的前进或后退按钮时,网址会发生变化,并且其中也没有#符号。

在检查“网络”选项卡时,显示只有一个jpeg请求成功完成,因此它来自客户端。但是,我已经在以下答案中读到,这只能通过网址中的#符号来完成:

jquery: change the URL address without redirecting?

Any way to change the header URL without reloading?

我还使用了用于chrome的Wappalyzer扩展来检测他们正在使用的任何javascript库,并且它只显示了jQuery。

关于他们如何做的任何想法?你能解释一下你用来分析行为的方法吗?

1 个答案:

答案 0 :(得分:1)

这是历史API的一项功能。您可以调用history.pushState或history.replaceState(用于您的示例)来更改URL而无需从服务器请求新页面。要处理后退按钮,你可以使用window.addEventListener('popstate'...)。

这里有一篇很好的文章: https://css-tricks.com/using-the-html5-history-api/

较旧的浏览器不支持此功能,因此您最好使用polyfill。当不支持历史API时,以下javascript库将在现代浏览器和哈希结尾中使用正确的URL: https://github.com/browserstate/history.js

祝你好运。