HTML5 History API 实际 URL 不存在

Question

我正在学习 HTML5 历史 API。以下是我能够实现的。

我有一个页面“a.html”，其中包含所有内容和一个指向“b.html”的链接。当我点击链接时，我几乎所有的内容都保持不变，只是图像发生了变化。所以我要做的是编写一个点击处理程序并避免加载“b.html”[实际上我的服务器中不存在 b.html]。我创建了一个 XMLHTTPRequest 并仅获取需要替换的内容（放置在名为“xmlres.html”的文件中，仅包含一个 img 标签），并使用 pushstate() 更新 url。

一切正常。但问题是，如果用户尝试复制当前 url “appname/b.html”并在另一个页面中打开，则找不到资源，因为我还没有创建“b.html”。我不想再次创建包含完整内容的 b.html，有什么办法可以解决这个问题。

我应该为 URL 编写任何事件侦听器还是应该如何进行。对此的任何见解都会有很大帮助。

Answer 1

我认为您说的是单页应用程序，通常称为 SPA。

基本上这个概念的意思是你有一个index.html，在里面你有一个默认隐藏的页面部分，并通过javascript和面向休息的服务根据用户管理和处理每个部分的内容互动。

众所周知，单页应用程序使用井号进行导航，在提供的小提琴中，这是使用井号完成的。

您可以通过此属性轻松访问哈希值：

console.log(window.location.hash);

这是一个fiddle I made，页面转换功能齐全，给我一点历史API功能。

这就是这个小提琴的作用：

• 如果您访问基本 url，它将显示索引部分。
• 如果您通过 url 访问基本 url，它将显示索引部分。
• 如果您访问/1#sectionname，如果该部分可用，它将显示它，否则它将显示您尝试访问的部分不可用，因此将显示未找到消息。
• 通过 jQuery 支持历史 API。
• 通过页脚链接导航。

在我添加历史记录功能时请耐心等待，如果您需要更多详细信息，请告诉我。

这里是wikipedia page for Single Page Applications，如果您想了解更多信息。

编辑：

• Here is the full fiddle.

我还发了blog post about it

希望对你有帮助！

Answer 2

这是一篇描述您遇到的现象的文章（在文章的底部）： http://www.sitepoint.com/an-overview-and-usage-of-javascript-history-api/

本质上，这归结为具有特殊的服务器能力，可以理解直接请求 404 URL 时要做什么。引用的文章显示了如何使用 PHP 完成此操作。其他应用程序服务器，如 Node、Vertx、Servlet Spec'd 服务器都为您提供对 URL 处理的特殊访问权限，让您确定是否会发生 404，并在发生 404 时为您提供特殊控制。这是一个未讨论的历史 API 的特殊情况。由于它，可能会出现一些其他问题。例如，当使用此技术时，在物理资源和 SPA 资源不存在时提供 404 可能仍然是一个好主意。虚拟资源是在 SPA 代码库中发生历史 API/URL 路由后将出现的页面。这当然会假设服务器对 SPA 中的路由如何工作有一点了解。