带有标准链接的HTML5 History API

时间:2011-07-20 21:59:56

标签: html5 history pushstate

所以,在重新设计我的网站后,我想我会使用HTML5历史API,当我在这里看到它的精彩使用时:http://diveintohtml5.ep.io/examples/history/casey.html

问题是,提供的代码对我不起作用(使用Chrome 8)。

不完全确定原因,但只是在成功加载部分内容后,使用链接的href值刷新页面。

是否还有其他使用API​​的示例?我不想要History.js或类似的东西,因为它使用hash / hashbangs作为后备。我正试图摆脱这些。

有什么想法吗?

编辑:Firebug向我发出“链接没有价值”以及对部分加载内容的无数请求。在这些页面刷新之后

1 个答案:

答案 0 :(得分:2)

您必须拦截链接点击并调用您自己的pushState - 如果您查看页面上的代码,您将看到事件处理程序:

function addClicker(link) {
  link.addEventListener("click", function(e) {
    if (swapPhoto(link.href)) {
      history.pushState(null, null, link.href);
      e.preventDefault();
    }
  }, true);
}