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

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

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

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

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

Answer 1

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

如果您试图让用户“包含”在您的Web应用程序中，以便后退按钮始终提供某种function，您需要将至少两个状态推送到堆栈，然后确保从您的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的状态对象，而不是您刚刚来的URI。 起初这让我感到困惑，但是当我想到这一点时就有意义了。 例如，用户可能刚刚回到Google后再回到您的网页。 状态对象是您将应用程序状态传达给代码的机会。

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

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

Answer 2

这可能有所帮助

当用户离开页面时， 卸载事件被发送到窗口元素。 这可能意味着很多事情之一。 用户可以单击链接离开页面，或在地址栏中键入新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 ''; }); 

另一个DEMO