这个网站如何在不发出任何 http 请求而只发出 jQuery 的情况下更改 url?

How is this website changing the url without issuing any http requests and only jQuery?

看看这个 link:

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

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

查看网络选项卡,发现只有一个jpeg请求成功完成,所以是客户端的东西。但是,我在以下答案中读到,这只能使用 url:

中的 # 符号来完成

jquery: change the URL address without redirecting?

Any way to change the header URL without reloading?

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

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

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

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

旧版浏览器不支持此功能,因此您最好使用 polyfill。以下 javascript 库将在现代浏览器中使用正确的 urls,并且当不支持历史记录 API 时使用散列结尾: https://github.com/browserstate/history.js

祝你好运。