【问题标题】:HTML5 History API with Standard links带有标准链接的 HTML5 History API
【发布时间】:2011-07-20 21:59:56
【问题描述】:

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

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

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

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

有什么想法吗?

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

【问题讨论】:

  • 您为什么使用 Chrome 8?你的自动更新坏了吗?
  • 完全不相关,但它是最新版本,我打算点击“+”符号
  • 可以在此处找到用于实现此目的的代码:diveintohtml5.org/examples/history/gallery.js 我正在使用我的智能手机,但这是相同的..

标签: html history pushstate


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 2013-10-19
    • 2015-04-23
    • 1970-01-01
    • 1970-01-01
    • 2016-03-01
    • 1970-01-01
    • 2013-01-26
    • 2014-09-28
    • 2017-12-12
    相关资源
    最近更新 更多