简体繁体 English

无缝加载网页

[英]Loading A Web Page Seamlessly

原文 2014-03-23 22:06:12 4 2 javascript

I have seen some websites that include nice transitions between pages, such as sliding or fading, etc. Most of these I have seen are actually one page that just transitions various sections. 我见过一些网页，包括页面之间很好的过渡，比如滑动或褪色等。我看到的大多数网页实际上是一个只转换各个部分的页面。 Then I came across a website that does it differently. 然后我遇到了一个不同的网站。

If you view this site and click the various pages the pages transition smoothly but the URLs are different and it doesn't appear to be one page site with hidden sections. 如果您查看此站点并单击各个页面，页面将平滑过渡，但URL不同，并且它似乎不是具有隐藏部分的一个页面站点。

How is this done? 这是怎么做到的？ I looked for explanations on how to do this but never found a good answer. 我寻找解释如何做到这一点，但从未找到一个好的答案。 Any help in determining how this is done would be great. 确定如何做到这一点的任何帮助都会很棒。

Note: I am looking to replicate this feature for websites I build so I am looking for an answer that will explain the idea or process of how this is coded. 注意：我希望为我构建的网站复制此功能，因此我正在寻找一个解释如何编码的想法或过程的答案。

2 个解决方案

The technique you're talking about is using history.pushState() which is quite new feature of html5. 你正在谈论的技术是使用history.pushState()这是html5的一个新功能。 More info you can find on MDN - Manipulating the browser history 您可以在MDN上找到更多信息- 操作浏览器历史记录

The trick this page does to move from page A --> page B involves 3 main steps: 此页面从页面A - >页面B移动的技巧涉及3个主要步骤：

Load the whole page B or only the content that is different from page A (probably using XMLHttpRequest). 加载整个页面B或仅加载与页面A不同的内容（可能使用XMLHttpRequest）。
Swap in the changed content (eg updating the body,..) 交换更改的内容（例如更新正文，..）
Update the browser location bar with the URL of page B without refreshing the page, using a particular HTML5 history method called pushState . 使用名为pushState的特定HTML5历史记录方法，使用页面B的URL更新浏览器位置栏，而不刷新页面。