这个网站如何在不发出任何 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
祝你好运。
看看这个 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
祝你好运。