使用新的 HTML5 历史机制构建一个无需重新加载页面的网站答案

【问题标题】：Building a website without page reload, using new HTML5 history mechanics使用新的 HTML5 历史机制构建一个无需重新加载页面的网站
【发布时间】：2012-10-29 05:43:09
【问题描述】：

我正在寻找一种在不导致整个页面重新加载的情况下更改浏览器地址位置的方法，因此我得到了一些有用的信息，如下所示：

http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

并尝试进入新的 HTML5 历史机制，我也得到了这个：

HTML5/jQuery: pushState and popState - deep linking?

于是想到了一个完全不同的想法......

我在问是否有一种可能的方式（我不一定是指“简单”）来构建，或者是否已经存在类似“框架”或类似的东西来构建一个能够完全避免页面重新加载....从而大量使用 ajax 和/或 jquery 等（我引用这个是因为它是我通常使用的）。

我认为这可以改善浏览此类网站时的“用户体验”。

【问题讨论】：

您所指的概念被称为“单页应用程序”，您可以在您喜欢的搜索引擎上搜索以找到许多框架和有关该主题的许多相关信息。
结帐 Knockout.js：knockoutjs.com
您正在询问如何通过使用ajax 将page2.html 的内容加载到page1.html，然后更新地址栏和浏览器历史记录来从page1.html 更改为page2.html。对吗？
是的，这就是淘汰赛的作用和 SPA 的作用。 @Quintin Robinson：谢谢，我以前不知道这些条款
@kevin boucher：谢谢，这是一个很好的live例子

标签： javascript jquery html history pushstate

【解决方案1】：

GitHub 就是这样构建的。当您在项目中并单击链接（如“bin”）时，它会加载与该链接对应的新内容并更新地址栏 URL，但页面本身不会重新加载。

【讨论】：

【解决方案2】：

“bbUI 工具包旨在基于 BB5/BB6/BB7/PlayBook 和 BlackBerry 10 上的 Web 渲染引擎的功能逐步增强其功能。[...] 通过不向屏幕元素，然后 bbUI 可以根据需要以任何方式修改 DOM 以获得所需的结果。

所有 DOM 操作都是在 HTML 片段未附加到活动 DOM 时发生的。这允许 DOM 操作非常、非常、快速地发生，并且在将整个片段插入 DOM 之前不会产生任何 WebView 布局计算。 JavaScript DOM 操作期间的布局计算是最昂贵的操作之一，它会降低基于 Web 的 UI 的速度。

您创建的每个屏幕都是一个 HTML 片段，它通过 AJAX 加载到应用程序中，以保持 DOM 的大小和内存使用量降至最低。'

https://github.com/blackberry/bbUI.js

【讨论】：

【解决方案3】：

只需查看http://backbonejs.org/，它应该对您的要求客户端绑定和浏览器历史都有帮助。

【讨论】：