javascript - 当后退按钮触发 popState 时，如何防止页面刷新？

Question

我试图在不重新加载的情况下修改我页面中的内容。目前我的代码是这样的:

window.onpopstate = function(event){
    // Ajax Request the Page and replace content with new content
};

这在我推送一个状态然后触发 popstate 事件时有效，但如果我在浏览器中按下后退按钮，它会导航到 url 而不是调用我的 onpopstate 事件。如何防止页面刷新并改为使用我的 ajax 调用更新页面？

编辑:我正在尝试使用 pushState 和 popstate 进行更新。我希望保持我的 url 哈希免费。

Answer 1

您必须确保历史上始终存在您从当前页面推送的历史状态，以防止后退按钮执行页面加载。

如果您试图让用户“包含”在您的 Web 应用程序中，以便后退按钮始终提供某种功能，您需要将至少两个状态压入堆栈，然后确保从中压入​​另一个状态你的 popstate 处理程序。

var foo = {foo: true}; // state object
history.pushState(foo, "unused argument", "#newInitialUri");
...
var bar = {bar: true}
history.pushState(bar, "unused argument", "#newStateOfWebApp");
...
window.onpopstate = function(event){
    ...
    var baz = {baz: true}
    history.pushState(baz, "unused argument", "#baseState");
};

在上面的例子中，我们加载了'/'。脚本开始执行，浏览器窗口 URI 更改为“/#newInitialUri”，但未加载页面。然后紧接着，浏览器 URI 更改为“/#newStateOfWebApp”并且没有页面加载发生。

用户按下浏览器上的后退按钮。您的 popstate 处理程序会触发。在您的处理程序中，event.state 等于 foo，浏览器 uri 是“/#newInitialUri”。没有页面加载发生。处理程序完成完成，调用 history.pushState，现在浏览器 uri 是“/#baseState”。没有页面加载发生。如果用户再次单击返回，您的 popstate 事件将再次触发，event.state 将等于 foo(再次)，浏览器 uri 将为“/#newInitialUri”(无页面加载)，然后它将再次为“/#baseState” (没有页面加载)。

要记住的重要一点是，您的 popstate 处理程序中的 event.state 始终包含您刚刚返回的 URI 的状态对象，而不是您刚来的那个 来自。起初这让我感到困惑，但当我想到它时就明白了。例如，用户可能在离开 Google 后刚刚回到您的页面。状态对象是您将应用状态传达给代码的机会。

请记住，某些浏览器会在页面加载时触发 popstate 事件(根据我的理解，这是根据规范应该发生的情况)。请务必在执行代码之前检查处理程序中的状态对象，以确保您不会在页面加载时运行您不打算运行的代码。

最后一点:如果您使用 jQuery 来处理事件，则需要使用 event.originalEvent.state 来引用状态对象。