我正在浏览这个网站 https://amaioswim.com/我确实注意到,当单击左侧的导航时,url 地址会立即更改。
他们还使用"淡出"和"淡入"窗帘使页面之间的无缝过渡。
我想知道你会使用什么样的方法来实现这一目标。
我知道使用 JS 您可以更改网址,但只能更改主题标签网址...右? 还是因为他们有一个延迟为 0 的超快服务器?
你认为他们把所有的东西都加载到同一个DVI容器中吗?
谢谢
这与历史 API 关系不大。 (他们使用该 API 来更新显示的 URL,但这只是网站工作方式中的一个小细节;它本身不会创建此行为。
此特定站点正在运行客户端框架。(我在缩小的代码中没有看到任何关于哪一个的明显线索。
站点内的链接作为 AJAX 请求进行处理。他们使用相同的端点进行新页面加载和 XHR 调用,并检查X-Requested-With
标头以确定是发送完整的服务器呈现的 HTML 文件(包括整个站点的框架(还是仅发送该特定页面的内容(将嵌入到已加载站点中的客户端(。
作为证据:这将返回完整的网站(如用户首次访问该 URL 时(:
curl 'https://amaioswim.com/about'
这只返回"关于"内容(就像用户在加载网站后单击"关于"链接一样(:
curl 'https://amaioswim.com/about' -H 'X-Requested-With: XMLHttpRequest'
(您也可以通过在浏览站点时在浏览器控制台中查看"网络"面板来查看此信息。
当然,仅加载单个页面的内容比加载整个页面 HTML(及其 CSS 和 JS(要快得多,并且允许您在 AJAX 调用进行时添加光泽效果,如交叉淡入淡出和动画。
从几年开始,您可以使用html5历史API:
https://css-tricks.com/using-the-html5-history-api/
它将允许您非常自由地操作 url。 例如,当您滚动到新部分时,您可以将该部分放在浏览器 URL 的末尾。
这就是运行中的历史记录 API。 在此处查找更多详细信息
尝试pushState
和replaceState
方法,这应该会让你产生这种行为。为了更精确地控制这些,您可能还需要查看popState
事件