如何像 GitHub 那样进行出色的无刷新页面更改?
GitHub 似乎正在做一些令人难以置信的事情:动画页面更改而不破坏状态。地址栏发生变化,但页面没有刷新,我会动画到下一个视图。
例如,点击此 URL:as3logback/ 然后点击此 URL:as3logback/lib
他们到底是怎么做到的!?!太酷了!他们是否使用某种框架或服务器端的东西?
GitHub seems to be doing something incredible: animated page changes without breaking state. The address bar changes, but the page doesn't refresh and I get animated to the next view.
For example, hit this URL: as3logback/ then hit this URL: as3logback/lib
How in the devil are they doing it!?! It's so cool! Are they using some sort of frame or something serverside?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
他们在这里有一个详细的博客文章,介绍其工作原理(HTML5 History API):https:// /github.com/blog/760-the-tree-slider
They have a detailed blog entry up on how it works (HTML5 History API) here: https://github.com/blog/760-the-tree-slider
http://www.asual.com/jquery/address/ 是一个 jquery 插件,支持HTML 5 History API 除了传统的哈希标签方法之外。这对于支持旧版浏览器中的转换(通过哈希标签)非常有用,同时使用 HTML 5 方法(如果可用)。
http://www.asual.com/jquery/address/ is a jquery plugin which supports HTML 5 History API in addition to the traditional hash tag method. This is useful for supporting the transitions in older browsers (via hash tag) while using the HTML 5 method when available.
他们最有可能使用 Ajax 和 HTML5
history.pushSate
。请注意,这仅适用于最新的浏览器,例如 Firefox 4 和 Chrome 8(IE 9?)。因此,您仍然需要一个后备解决方案,例如使用片段标识符,就像许多 Ajax 驱动的网站现在所做的那样(Facebook 是一个很好的例子,可以看出其中的差异)。
They most likely use Ajax and HTML5
history.pushSate
.Note that this only works in the most recent browsers like Firefox 4 and Chrome 8 (IE 9 ?). So you would still need a fallback solution like using the fragment identifier as a lot of Ajax driven websites do now (a good example to see the difference is Facebook).
Pjax:演示、来源 (GitHub)
这是 GitHub 使用的... 参考
Pjax: Demo, Source (GitHub)
It is the one that GitHub uses... reference
其实这个问题已经有了答案,但我还是想补充一下大家如何在自己的网站上轻松实现这一点。
您所要做的就是在每个页面上插入以下脚本。
更多信息请参见:https://dymc.cf/documentation
Actually, the question has already been answered, but I still wanted to add how everyone can easily implement this on their website.
All you have to do is insert the following script on each page.
More information here: https://dymc.cf/documentation