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

我正在尝试在不重新加载的情况下修改页面中的内容。目前我的代码是：

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

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

编辑：我正在尝试使用pushState和popstate进行更新。我希望保持我的URL散列免费。

可能会有帮助

当用户导航离开页面时，事件被发送到窗口元素。这可能意味着许多事情之一。用户可以单击链接离开页面，或者在地址栏中键入新的URL。前进和后退按钮将触发事件。关闭浏览器窗口将触发事件。即使页面重新加载也会首先创建卸载事件

参考

未经测试

    $(window).unload(function(e){    
        e.preventDefault();
        $(window).trigger('popstate ');      

    });    

    $(window).bind('popstate ',function(){

   //your ajax call here 
    });

最后，这里有一个点击浏览器的后退按钮，看看它是否工作

更新

你是对的卸载将被取消，但你可以做一些事情，如

$(window).unload(function(e){
    e.preventDefault();
    $(window).trigger('beforeunload');   

});


$(window).bind('beforeunload',function(){

alert('call your ajax here');
    return '';
});

---

您必须确保在历史记录中始终存在从当前页面按下的历史记录状态，以防止“后退”按钮执行页面加载

如果您试图将用户“包含”在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的state对象，而不是您刚刚来自的URI。一开始我很困惑，但当我想到这一点时，它是有道理的。例如，用户可能在离开谷歌后刚刚回到您的页面。状态对象是您将应用程序的状态传达给代码的机会

请记住，一些浏览器在页面加载时触发popstate事件（据我所知，根据规范，这是应该发生的）。在执行代码之前，请确保在处理程序中检查state对象，以确保不会在页面加载中运行不打算运行的代码

---

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

您的“onpopstate”函数是否在返回前对事件对象返回

false

或调用.preventDefault（）”（实际上只是返回

false

可能不起作用。）我尝试返回false，但它什么也没做。我遇到了相反的问题：当我按下后退按钮时，它既不会导航到URL，也不会调用onpopstate！我不确定这是否能满足我的要求。根据jquery页面：无法使用.preventDefault（）取消卸载事件。此事件可用，因此脚本可以在用户离开页面时执行清理。单击“上一步”按钮后，此答案仍将离开页面。我只想用ajax更新。使用散列是防止整个页面重新加载的唯一方法吗？