Question

我正在研究使用HTML5 History API解决与AJAX加载内容的深层链接问题，但我正在努力开始。有没有人知道任何好的资源？

我想使用它，因为它似乎是一种很好的方式，允许发送链接的可能性可能没有JS打开。当有人向JS发送链接给没有的人时，很多解决方案都会失败。

我最初的研究似乎指向JS中的History API和pushState方法。

Answer 1

有关此功能的Mozilla开发人员网络页面是您需要的所有内容：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

不幸的是，HTML5 History API在所有HTML5浏览器中的实现方式不同（使其不一致且有错误）并且没有HTML4浏览器的后备。幸运的是，History.js为HTML5浏览器提供了交叉兼容性（确保所有HTML5浏览器按预期工作），并可选择为HTML4浏览器提供哈希回退（包括对数据，标题，pushState和replaceState功能的维护支持）。

您可以在此处详细了解History.js： https://github.com/browserstate/history.js

有关Hashbangs VS Hashes VS HTML5 History API的文章，请参阅此处： https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Answer 2

我从'潜入HTML 5'中受益匪浅。解释和演示更容易，更重要。历史篇章 - http://diveintohtml5.info/history.html 和历史演示 - http://diveintohtml5.info/examples/history/fer.html

Answer 3

使用HTML5 pushstate时请记住，如果用户复制或书签深层链接并再次访问它，那么这将是404的直接服务器命中，因此您需要为它做好准备，甚至是pushstate js库赢了不帮你最简单的解决方案是向您的Nginx或Apache服务器添加重写规则，如下所示：

Apache（如果您使用的话，在您的虚拟主机中）：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx的

rewrite ^(.+)$ /index.html last;

Answer 4

HTML5 history spec很古怪。

history.pushState()不会发送popstate事件或自行加载新页面。它只是为了将国家推向历史。这是一个＆＃34;撤消＆＃34;单页面应用程序的功能。您必须手动调度popstate事件或使用history.go()导航到新状态。这个想法是路由器可以监听popstate事件并为您进行导航。

有些注意事项：

history.pushState()和history.replaceState()不发送popstate个活动。
history.back()，history.forward()以及浏览器的后退和前进按钮会发送popstate个事件。
history.go()和history.go(0)执行整页重新加载，不会发送popstate个事件。
history.go(-1)（返回1页）和history.go(1)（转发1页）会发送popstate个事件。

您可以使用此类历史记录API来推送新状态并发送一个popstate事件。

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

然后用路由器监听popstate个事件。

Answer 5

你可以尝试Davis.js，它会在你的JavaScript中使用pushState进行路由，如果没有JavaScript，它允许你的服务器端代码处理请求。

Answer 6

以下是关于轨道广播的Ryan Bates主题的精彩画面。最后，如果history.pushState方法不可用，他只是禁用ajax功能：

http://railscasts.com/episodes/246-ajax-history-state

Answer 7

你可能想看看这个jQuery插件。他们的网站上有很多例子。 http://www.asual.com/jquery/address/

Answer 8

我在History.js上编写了一个非常简单的路由器抽象，称为StateRouter.js。它处于开发的早期阶段，但我正在使用它作为我正在编写的单页应用程序中的路由解决方案。和你一样，我发现History.js很难掌握，特别是因为我对JavaScript很陌生，直到我明白你真的需要（或应该有）路由抽象，因为它解决了一个低级别的问题。问题

这个简单的示例代码应该演示它是如何使用的：

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

为了证明它的用法，我已经编造了一些fiddle。

Answer 9

如果jQuery可用，您可以使用jQuery BBQ

使用HTML5 History API的好教程（Pushstate？）

9 个答案: