0

给定一个带有 ajax 导航的 webapp，您打算使用 html5 的历史导航。

但是：绑定到它不会触发的 popstate 事件。除了页面加载，当它是：

如果 HTML5 可用（检测正确，演示在 Chrome 中的效果与 FF 一样好）：

// Callback
function historyChangeHandler(data) {
    console.log(data);
}

// Bind
$(window).bind('popstate', historyChangeHandler);


// Trigger
$("a").click(function(e) {
    var url = "/";
    // ...
    console.log("clicked");
    history.pushState({url: url}, "", url);
    return false;
});

什么不起作用：

  • 单击链接时不会调用 popstate 回调 historyChangeHandler()。也就是说，打印的是 clicked，而不是事件。

我尝试了什么：

  • 使用 setTimeout 推迟 pushState 调用。
  • e.preventDefault(); 并返回 true 而不是 false
  • 也附加到 div-s 并返回 true

有什么作用：

  • historyChangeHandler() 在页面加载时被调用。
  • historyChangeHandler() 在按下后退按钮时被调用。
  • historyChangeHandler() 在按下前进按钮时被调用。
  • historyChangeHandler() 如果从控制台调用 history.pushState({url: "/test"}, "", "/test") ！

有什么我想念的线索吗？

4

2 回答 2

2

popstate单击链接时不应调用。当用户使用后退/前进按钮导航时调用它。

一切都在按应有的方式工作。

于 2012-03-10T22:58:30.177 回答
1

为什么需要触发 popstate 事件？为什么不直接调用你的函数？

$("a").click(function(e) {
    var url = "/";
    // ...
    console.log("clicked");
    history.pushState({url: url}, "", url);
    historyChangeHandler({url: url});
    return false;
});
于 2012-03-10T22:56:08.820 回答