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

Question

我试图在没有重新加载的情况下修改页面中的内容.目前我的代码是:

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

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

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

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来引用状态对象.