无缝页面加载

Question

首先，对于这里使用的不良术语感到抱歉。我没有找到我试图解释的东西的线索。让我试试：

我最近看到许多不错的网站正在使用＆＃34;无缝超链接构建＃34; system - 当点击超链接时，它不会访问网址，但它会以某种方式无缝地切换到它（没有页面重新加载等）。有些网站以这样一种方式做到这一点，看起来网站是作为一个单一的部分完成的，例如2000年初的Flash网站。

我知道这个话题：

这是一个解释我的意思的例子： http://www.thenerodesign.com/

我知道这个帖子： How does GitHub change the URL without reloading a page?

我在这里要求的并不仅仅是网址的变化＆＃34;部分也＆＃34;加载点击的内容＆＃34;部分。我可以修改地址栏，没问题。但是，我没有找到如何在访问某个网址时显示不同网站的线索，或者如何以无缝方式加载点击的超链接，如上面的网站示例。

因此，问题超出了历史记录api＆＃34;

如果我的问题不清楚请告诉我，以便我可以相应地修改它以使其更清晰。

谢谢。

Answer 1

您正在寻找的是单页应用（SPA）。开始挖掘这个概念。

在一天结束时，大多数SPA实现完全在客户端呈现视图，并且它们从一个视图切换到其他加载数据 JSON ，并在客户端也绑定它。

查看Angular UI Router的主页，您将了解在SPA世界上迈出第一步所需的一切。

OP说：

  

我觉得我理解水疗中心的核心概念，即使它有点儿   位---我真正得到的是 - 如何显示正确的   直接访问href链接时的内容（而不是点击）

这也是在客户端完成的。首次访问SPA时，它会读取URL中的路径并自动打开具有所需状态的右视图。想象一下，使用点击处理程序进入某个视图的操作也可以以编程方式触发。

当我自动说 时，我的意思是某些JavaScript代码必须处理这种情况。通常你使用像Angular UI Router这样的SPA UI框架或任何其他框架，因为他们已经为你处理了这个问题。

回答错误的昆汀问题......

@Quentin说：

  

“首次访问SPA时，它会读取URL中的路径并打开   正确的观点...当我自动说我的意思是一些   JavaScript代码必须处理这种情况。“ - 不要这样做。那   完全忽略了使用历史API的重点   构建混合客户端/服务器端应用程序，以便在JS失败时   仍然有效，并且URL适用于搜索引擎等。如果你做的话   整个事情依赖于JS你可能会很好地使用hashbangs

1. 并非所有SPA都具有SEO意识。
2. 并非所有SPA都是混合型。
3. 并非所有SPA都有公共表面。可以使用身份验证和授权完全访问SPA。例如，100％SPA私人社交网络或管理面板是否会从服务器端部分加载？的错！即可。
4. 并非所有SPA都是面向浏览器的。在使用像Apache Cordova这样的SDK开发移动混合应用程序时，没有人会错过SPA的重点。
5. 如果服务器出现故障，客户端应用程序继续正常工作就可以了。自从本地存储，索引数据库和其他与HTML5相关的API出现以及在脱机模式下运行HTML5应用程序的机会，SPA仍然可以与服务器关闭并同步数据或队列服务器操作，直到服务器再次启动
6. 这种方法并没有破坏HTML5 History API的目的。怎么样？ 如果历史记录仍然存在，SPA可以完全在客户端恢复其状态，并在服务器可用时请求丢失的数据！。
7. 最后一点：如果不是像你说的那样混合型SPA，你如何从服务器端以正确的状态打开SPA？ 如果您开发了一个真正的Web应用程序，可能并非所有操作都需要服务器，如果需要服务器，我会仔细检查我的第5点。
8. 真正的SPA / Web应用程序定义服务器（即RESTful API）是依赖项而不是应用程序的组成部分。该应用程序只是客户端操作和服务器端操作的混合。

似乎@Quentin和谁认为我的答案以错误的方式解决了这个问题，而我认为当前和未来的HTML5 Web应用程序开发不仅仅是处理动态视图，这两者都是不可能的。来自浏览器或服务器的服务器。

我们在这里放一个简单的样本。如果Adobe将Photoshop移植到HTML5（使用画布'2D / 3D渲染），并且它需要服务器进行繁重的图形过滤处理并在云中存储文件，您是否会使用服务器打开最后编辑的文件或客户端将访问它的客户端历史记录使用历史API ，本地存储和/或IndexedDB来请求服务器最新版本的文件或者保存的草稿？

对我来说，SPA不仅仅是视差滚动或动态加载容器中的内容：它是Web应用程序的新时代。

Answer 2

你看到的可能是一个 ajaxified 页面，该页面使用ajax加载该网址的数据并使用JavaScript来更改页面。