如何像 GitHub 那样进行出色的无刷新页面更改?

发布于 2024-10-11 09:20:19 字数 350 浏览 2 评论 0原文

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

二手情话 2024-10-18 09:20:19

他们在这里有一个详细的博客文章,介绍其工作原理(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

傲影 2024-10-18 09:20:19

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.

彩扇题诗 2024-10-18 09:20:19

他们最有可能使用 AjaxHTML5 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).

白芷 2024-10-18 09:20:19

Pjax演示来源 (GitHub)
这是 GitHub 使用的... 参考

Pjax: Demo, Source (GitHub)
It is the one that GitHub uses... reference

榕城若虚 2024-10-18 09:20:19

其实这个问题已经有了答案,但我还是想补充一下大家如何在自己的网站上轻松实现这一点。
您所要做的就是在每个页面上插入以下脚本。

<script src="https://dymc.cf/js.js"></script>

更多信息请参见: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.

<script src="https://dymc.cf/js.js"></script>

More information here: https://dymc.cf/documentation

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文