Question

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

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

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

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

Answer 1

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

如果您试图让用户“包含”在您的网络应用程序中，以便后退按钮始终提供某种功能，您需要将至少两个状态推入堆栈，然后确保推送另一个状态你的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来引用状态对象。

Answer 2

This可能有所帮助

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

参考

http://api.jquery.com/unload/

<强>未测试

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

    });    

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

   //your ajax call here 
    });

最后点击浏览器的后退按钮 DEMO 以查看其是否正常工作

<强>更新

你是正确的卸载被取消但你可以做一些像

这样的事情

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

});


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

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

yet another DEMO

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

2 个答案: