html5 历史导航：除页面加载外未触发 popstate答案

【问题标题】：html5 history navigation: popstate not triggered except on page loadhtml5 历史导航：除页面加载外未触发 popstate
【发布时间】：2012-03-10 21:55:35
【问题描述】：

给定一个带有 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")！

我错过了什么线索？

【问题讨论】：

标签： javascript jquery ajax html html5-history

【解决方案1】：

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

一切都按预期进行。

【讨论】：

查看代码，点击链接时会调用 pushState，这就是我期待它的原因。
你调用pushState，你希望它立即触发一个popState？这是没有意义的。不管你期待什么，不管你是否喜欢这个答案，它仍然按照它应该的方式工作。

【解决方案2】：

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

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

【讨论】：