无缝加载网页

Loading A Web Page Seamlessly

本文关键字：网页 加载      更新时间：2023-09-26

我看到一些网站在页面之间有很好的过渡，比如滑动或褪色等。我所见过的大多数都是一个页面，只是转换了各个部分。然后我看到了一个网站，它的做法不同。

如果你查看这个网站，点击各个页面的页面过渡顺利，但url是不同的，它似乎不是一个页面的网站与隐藏的部分。

这是怎么做的?我寻找如何做到这一点的解释，但从来没有找到一个好的答案。如果你能帮忙决定怎么做，那就太好了。

注意:我正在寻找复制这个功能的网站，我建立所以我正在寻找一个答案，将解释这是如何编码的想法或过程。

你所说的技术是使用history.pushState()，这是html5的新功能。您可以在MDN上找到更多信息-操纵浏览器历史

这个页面从A页移动到> B页的技巧包括三个主要步骤:

  1. 加载整个页面B或只加载与之不同的内容页面A(可能使用XMLHttpRequest)。

  2. 交换更改的内容(例如更新正文，…)

  3. 将浏览器位置栏更新为B页的URL，而不包含刷新页面，使用特定的HTML5历史方法调用 pushState .

相关文章：