无缝页面加载[重复]答案

【问题标题】：Seamless page loading [duplicate]无缝页面加载[重复]
【发布时间】：2015-11-01 20:11:00
【问题描述】：

首先，很抱歉这里使用了错误的术语。我不知道我试图解释的东西叫什么。让我试试：

我最近看到很多不错的网站正在使用“无缝超链接”系统构建——当点击超链接时，它不会访问 URL，但它会以某种方式无缝切换到它（没有页面重新加载等）。一些网站这样做的方式非常好，以至于网站看起来像是一个单独的部分，例如 2000 年代初期的 Flash 网站。

我知道这个话题：

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

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

我在这里要问的不仅是“更改网址”部分，还包括“加载点击的内容”部分。我可以修改地址栏，没有问题。但是，我不知道如何在访问某个 url 时显示不同的网站，或者如何像上面的网站示例那样以无缝方式加载点击的超链接。

因此，问题超出了“历史API”

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

谢谢。

【问题讨论】：

这是使用 AJAX 完成的 - w3schools.com/ajax/default.asp
@SeanMurrin 直接点击超链接时如何加载正确的内容？我必须阅读地址栏并通过 ajax 加载内容吗？

标签： javascript html dom web

【解决方案1】：

您正在寻找的称为单页应用程序 (SPA)。开始挖掘这个概念。

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

查看Angular UI Router 的主页，您会很好地了解在 SPA 世界中迈出第一步所需的条件。

OP 说：

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

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

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

回答错误的 Quentin 问题...

@Quentin 说：

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

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

似乎@Quentin 和谁都认为我的回答以错误的方式解决了这个问题，而我相信当前和未来的 HTML5 Web 应用程序开发不仅仅是使用动态视图是毫无疑问的来自浏览器或服务器的服务器。

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

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

【讨论】：

我相信我理解了spa的核心概念，即使有点——我真正不明白的是——直接访问href链接时如何显示正确的内容（而不是点击）
@Mia 没问题，不客气；）
@Mia — 服务器以您想要的状态为页面提供服务，就像 URL 始终有效一样。
@Quentin 你能给我一个基本的例子吗？如果您想了解某些东西，很难搜索到它，但您完全不知道您在寻找什么或从哪里开始。谢谢你的回答
错误。 http://example.com/foo 是一个包含单词 foo 的页面。当浏览器从http://example.com 请求/foo 时，服务器发回一个包含单词foo 的HTML 文档。

【解决方案2】：

您看到的可能是一个 ajaxified 页面，该页面正在使用 ajax 在该 url 加载数据并使用 JavaScript 更改页面。

【讨论】：