Question

鉴于带有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（）。也就是说，点击是打印，但不是事件。

我尝试了什么：

使用setTimeout延迟pushState调用。
e.preventDefault（）;并返回true而不是false
还附加到div-s并返回true

工作原理：

在页面加载时调用historyChangeHandler（）。
在按下后退按钮时调用historyChangeHandler（）。
在按下前进按钮时调用historyChangeHandler（）。
historyChangeHandler（）如果从控制台调用history.pushState（{url：“/ test”}，“”，“/ test”）！

我想念的任何线索？

Answer 1

单击链接时不应调用

popstate。当用户使用后退/前进按钮导航时调用它。

一切都按照预期的方式运作。

Answer 2

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

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

html5历史导航：popstate除页面加载外没有被触发

2 个答案: