问题标签 [html5-history]

我正在重新设计我上个世纪的应用程序（请注意，效果很好），重新开始的机会让我调查了几个方面。这个问题是关于既可以使用现代 HTML5 历史功能又可以不使用现代 HTML5 历史功能的架构。

假设我有以下带有嵌入式 gewgaws 的 URI 结构 bloggish 应用程序

我希望可以通过 URI 访问屏幕上可以看到的每个资源或方面。例如，“about”文本被加载到基本模板（imagine handlebarsjs）中，并在用户单击“about”链接时显示在一个小弹出窗口中。但是，如果文本直接加载到浏览器中，用户也应该能够看到相同的文本，例如，如果http://example.com/about通过电子邮件发送给某人并且该人点击了它。

同样的事情可能http://example.com/Resource2#chart?a=life's-answer&b=42会使用.abquery_string

这意味着我应该有一种机制，无论请求什么资源，首先加载一个空模板，然后进行 Ajax 调用以检索请求的资源，甚至是其自定义状态。然后我应该使用历史 API 的魔力来更改 URI。

或者，我应该拥有每个资源的静态服务器版本，以防直接请求。事实上，无论如何，我可能应该拥有每个资源的服务器版本，以防某些 luddite 想要在没有 JavaScript 的情况下使用该应用程序。

两个问题——

对于如何处理上述问题，是否有一些一般性建议？是否有任何一个（或两个）JavaScript MV* 框架比其他框架做得更好？

PS：尽管我很喜欢这个想法和meterojs正在努力实现的目标，但我现在还没有准备好搭上我的马车nodejs。我需要在服务器端做很多事情，最好用更传统的东西来提供服务，这种语言已经存在了足够长的时间，可以围绕它建立一个完整的生态系统。

我正在使用 History.js 和 Jquery（以及一点 GWT），我使用 History.pushState() 方法来存储 Ajax 有效负载，然后在 statechanged 事件中根据有效负载绘制屏幕。现在在我的应用程序中，浏览器的后退和前进按钮可以正常工作。

奇怪的是，当用户单击我的应用程序中的链接，将他们带到我的应用程序之外的页面（相同域但另一个应用程序）时，他们出去，查看页面，然后点击返回按钮重新进入我的应用程序。

我的应用程序加载后，它没有收到 popstate 或 statechange 事件，但不知何故，浏览器实际上正在绘制屏幕，​​使其与离开我的应用程序之前的样子完全相同。

我想了解这里发生了什么。

[编辑：我错了。我的代码正在执行，我确实收到了 statechange。我对 History.js 有一些假设，现在我意识到要正确编码，您应该收到 AJAX 有效负载，然后调用 pushstate 将其放入堆栈。然后您的 statechange 事件将触发，您应该在 statechange 函数中从堆栈中读取状态并相应地绘制屏幕。当您正常运行您的应用程序时将执行相同的代码，并且当用户点击后退按钮时将执行相同的代码。]

我有一个链接，我正在尝试使用历史 API - 它位于我的单页应用程序的索引页面上：

当我单击该链接时，一个模板会加载到#main我的索引页面上的 div 中——并且 URL 会更改xxx/logout.php为应有的状态。这是负责交换的javascript：

一切正常，但是当我单击后退按钮时，模板目录会加载到#maindiv 中。发生这种情况是因为location.pathname计算结果为/~Eamon/，而在href.split("/").pop()- 之后它只是一个空字符串。因此，模板目录被加载，因为它是函数中指向的目录swapPage。

显然，当我单击后退按钮时，我希望程序做的只是反转刚刚发生的事情。在这种情况下，这意味着在单击链接之前交换我在#maindiv 中的内容。如何“保存”我之前的内容并在单击后退按钮时加载它？它可能像更改目录结构一样简单......但我希望我的应用程序成为一个 SPA。

我读过的关于这个主题的东西：

1. http://diveintohtml5.info/history.html（这是我在建模后的代码）
2. http://www.sitepoint.com/an-overview-and-usage-of-javascript-history-api/
3. http://html5doctor.com/history-api/
4. http://dev.opera.com/articles/view/introducing-the-html5-history-api/

下面的代码是 ServiceStack 插件的初始传递，以$locationProvider.html5Mode(true);在 servicestack 自托管时支持 angularjs 配置（如在此处请求：Routing path with ServiceStack and Serving default index.html page when using Angular HTML5mode and Servicestack on backend）。我想我有一个很好的通用解决方案，最后一个问题（除了将其切换为Feature与其他插件一致的命名约定）。

如何在我的 ProcessRequest 中一般处理任何受支持的默认文档类型？现在该函数假定降价。我希望有一个比关闭文件扩展名的 switch 语句更优雅的解决方案。理想情况下，我想调用一些可以继续工作的东西，因为随着时间的推移会支持更多的默认文档类型。

1. 在 Chrome 中打开一个新标签（例如打开http://google.com ）

2. 打开一个testpage.htm包含history.pushState({},"test","#lightbox"); 将 url 更改为testpage.htm#lightbox

3. 如果您点击 chrome 的后退按钮，则 url 将更改为http://google.com，这是两种状态，而不是一种

firefox 和 msie10 都很好用，所以这是一个 chrome 问题，我该如何解决？有解决方法吗？

先感谢您

（随意给我的问题一个更好的标题，并随时纠正我的英语）

笔记：

在第 2 步中，您也可以使用window.location.hash = "#lightbox"但执行相同的问题

在第 3 步中，您可以在代码中模拟后退按钮，history.back()在这种情况下使用 url 切换到正确的testpage.htm，因此这仅与 Chrome gui 的后退按钮有关

我也试过

没有成功 ：（

更新 2：使用History.js做同样的事情

我有单页 Web 应用程序是在主干js 上编写的。我使用不同的路线，每条路线对应一个控制器。当我加载我的应用程序根 URL (myapp.com/) 或任何没有参数的非根 URL (myapp.com/somelocation) 时，它可以正常工作。但是，当我尝试使用查询参数（即 myapp.com/somelocation?z=search）将我的应用程序直接加载到任何位置时，我遇到了一些麻烦。应用程序呈现两次 - 第一次使用对应于 myapp.com/somelocation?z=search 的正确控制器，第二次使用对应于 myapp.com/somelocation 的控制器。

路由表如下所示：

控制器如下所示：

Document.ready 脚本如下所示：

如果我不调用 router.navigate(window.location, {trigger: true}); 明确地没有一个控制器呈现我的应用程序起始页。当我调用它时，应用程序正常工作，直到我尝试从 myapp.com/timeline?foo=bar URL 开始。如果我这样做，我的应用程序会呈现两次（无需重新加载页面）。

有什么建议么？对于具有丰富路由场景的主干js驱动的单页应用程序，常见的 document.ready 引导模式是什么？

我正在使用 Dojo。代码相当长且复杂，但这里是正在发生的事情的摘要：

页面加载，在应用程序的构建过程中，哈希以编程方式使用 dojo/hash 设置两次，第一次设置为“”，第二次设置为“tileName="Y01"。第二次更改后，某些内容复制了最后一个条目一个随机的时间点,它看起来不像我的代码中的任何内容.基本上 - 在第二次哈希更改之后, 历史记录读取 3 个条目 - 但如果我添加一个包含 500-600 个条目的控制台循环, 我会看到在某个点历史将读取 4 个条目，最后一个条目是第三个条目的副本。

任何人都可以阐明可能导致这种情况的原因吗？很难调试，因为该重复甚至没有被注册为“哈希更改”，因为它实际上并没有更改哈希，只是复制了历史条目。

想知道我是否可以使用 HTML5 历史 API 的replaceState()方法（或类似的方法）来更改以前访问过的页面（而不是当前页面）的状态？

据我了解， History.js是HTML5 History/State APIs的 polyfill 。因此，在现代浏览器上，它应该简单地使用popstate来监听 URL 的变化。那么，为什么在最新的 Chrome 上我可以看到计时器每 250 毫秒触发一次？这似乎很浪费，每隔几秒钟就会触发一次垃圾收集器。

查看这个官方History.js 演示。

我正在使用 Ajax 内容加载和 pushStates 来获得响应更快的界面，但我遇到了问题。

浏览网站时一切正常，内容已加载，URL 更改为我选择的任何内容history.pushState({'url':newUrl},"", newUrl);

我的页面上有很多相关链接，尤其是 GET 参数，例如<a href="?view=more">..</a>. 在正常环境中，该?view=more部分被附加到工作 URL 并且页面加载所需的内容。

我的问题是，当使用这些 URL 时，它会附加?view=more到“硬”加载的第一页 URL，因此在整个网站导航时，GET 参数只会附加到第一个加载的页面。主题标签也是如此。如果我有一个链接<a href="#details">..</a>，我可以看到我的浏览器将主题标签附加到第一个加载的页面 URL。

如何使这些类型的 URL 响应当前活动的 URL？..