使用 HTML5历史 API (Pushstate?)的好教程

我正在研究使用 HTML5历史 API 来解决加载 AJAX 内容的深度链接问题，但是我正在努力起步。有谁知道什么好的资源吗？

我想使用这似乎是一个伟大的方式，以允许那些被发送的链接可能没有 JS 打开的可能性。许多解决方案在使用 JS 的人向不使用 JS 的人发送链接时失败。

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

Http://html5demos.com/history

130211 次浏览
小开

你可能想看看这个 jQuery 插件。他们的网站上有很多例子

小开

如果 jQuery 可用，则可以使用 JQuery BBQ

小开
最佳答案

对于一个很棒的教程来说，这个功能的 Mozilla Developer Network 页面就是你所需要的:

不幸的是，HTML5历史 API 在所有 HTML5浏览器中的实现方式都不同(这使得它不一致并且存在漏洞) ，而且对于 HTML4浏览器没有退路。幸运的是，V 史为 HTML5浏览器提供了交叉兼容性(确保所有 HTML5浏览器按预期工作) ，并可选地为 HTML4浏览器提供散列回退(包括维护对数据、标题、 pushState 和替换 State 功能的支持)。

你可以在这里阅读更多关于 History.js 的内容: Https://github.com/browserstate/history.js

有关 Hashbang VS Hash VS HTML5 History API 的文章，请参阅这里: Https://github.com/browserstate/history.js/wiki/intelligent-state-handling

小开

你可以试试 Davis，它给你在你的 JavaScript 路由时使用 pushState 可用，没有 JavaScript 它允许你的服务器端代码来处理请求。

小开

我从“一头扎进 HTML5”中受益匪浅。解释和演示更加简单明了。 历史章节 -http://diveintohtml5.info/history.html 历史演示- http://diveintohtml5.info/examples/history/fer.html

小开

这里是一个伟大的屏幕上的主题演员莱恩贝茨的铁路广播。最后，如果 history. pushState 方法不可用，他只需禁用 ajax 功能:

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

小开

在使用 HTML5 pushstate 时请记住，如果用户拷贝或书签一个深度链接并再次访问它，那么这将是一个直接的服务器命中，这将是404，所以你需要为它做好准备，甚至 pushstate js 库也不会帮助你。最简单的解决方案是向 Nginx 或 Apache 服务器添加一个重写规则，如下所示:

Apache (如果使用 vhost，在 vhost 中) :

<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;
小开

我在 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();

这里是一个小 小提琴，我已经炮制，以示范其用法。

小开

HTML5历史规范很古怪。

history.pushState()不会分派 popstate事件，也不会自己加载新页面。这只是为了将一个州推入历史。这是单页应用程序的“撤消”特性。您必须手动分派 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 事件。

PushState ({ message: ‘ New State!’} ，‘ New Title’,’/link’) ; PatchEvent (new PopStateEvent (‘ popstate’，{ 泡沫: 假的, 可取消: 假, 状态: 历史，状态 }));

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


提交答案