html5历史导航:除了页面加载之外，没有触发popstate

html5 history navigation: popstate not triggered except on page load

本文关键字：popstate 加载 导航 历史 html5      更新时间：2023-09-26

给定一个带有ajax导航的Web应用程序，您打算使用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

什么有效：

  • historyChangerHandler（）在页面加载时被调用
  • historyChangerHandler（）在按下后退按钮时被调用
  • historyChangerHandler（）在按下前进按钮时被调用
  • historyChangeHandler（），如果从控制台调用history.pushState（｛url:"/test"｝，"，"/test"）

我遗漏了什么线索吗？

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

一切都按预期进行。

为什么需要启动popstate事件？为什么不直接调用函数呢？

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