当后退按钮触发popState时，我怎样才能防止页面刷新？ [英] When the back button triggers popState how can I prevent a page refresh?

问题描述

我正在尝试修改我的网页中的内容而无需重新加载。目前我的代码为：

  window.onpopstate = function（event）{
 // Ajax请求页面并替换新内容的内容
}; 
  

当我按下一个状态然后触发popstate事件时，这会起作用，但是如果我按下后退按钮浏览器导航到的网址，而不是调用我的onpopstate事件。我怎样才能防止页面刷新，并用我的ajax调用来更新页面？

编辑：我试图用pushState和popstate进行更新。我希望能够保持我的网址免费哈希。

解决方案

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

如果您试图让用户包含在您的Web应用程序中后退按钮总是提供某种功能，您需要将至少两个状态推入堆栈，然后确保从popstate处理程序中推送另一个状态。

  var foo = {foo：true}; // state对象
 history.pushState（foo，unused argument，＃newInitialUri）; 
 ... 
 var bar = {bar：true} 
 history.pushState（bar，unused argument，#newStateOfWebApp）; 
 ... 
 window.onpopstate =函数（事件）{
 ... 
 var baz = {baz：true} 
 history.pushState（baz，未使用的参数，#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的状态对象到，而不是来自的那个。起初我对此感到困惑，但是当我想到这一点时，这是有道理的。例如，用户可能刚刚回到您的页面，可能已经去了谷歌。状态对象是您将应用状态与代码进行通信的机会。

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

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

I am trying to modify the content in my page without a reload. Currently my code reads:

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

This works when I push a state then trigger the popstate event, but if I press the back button in the browser it navigates to the url instead of calling my onpopstate event. How can I prevent a page refresh and update the page with my ajax call instead?

edit: I am trying to update with pushState and popstate. I was hoping to keep my urls hash free.

解决方案

You have to make sure there is always a history state you've pushed from the current page on the history to prevent the back button from performing a page load.

If you're trying to keep the user "contained" in your web app so the back button always provides some kind of function, you need to push at least two states onto the stack and then make sure to push another state from your popstate handler.

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");
};

In the above example say we loaded '/'. The script starts executing and the browser window URI changes to '/#newInitialUri' but no page load occurs. Then immediately after, the browser URI changes to '/#newStateOfWebApp' and no page load occurs.

The user pushes the back button on their browser. Your popstate handler fires. During your handler, event.state equals foo and the browser uri is '/#newInitialUri'. No page load occurs. The handler finishes completing, calling history.pushState and now the browser uri is '/#baseState'. No page load occurs. If the user clicks back again, your popstate event will fire again, event.state will equal foo (again), the browser uri will be '/#newInitialUri' (no page load) and then it will be '/#baseState' again (no page load).

The important thing to remember is that the event.state in your popstate handler always contains the state object for the URI you've just come back to, not the one you just came from. This was confusing to me at first, but made sense when I thought about it. For example, the user may have just come back to your page after perhaps having gone off to Google. The state object is your opportunity to communicate the status of your app to your code.

Keep in mind that some browsers fire the popstate event on page load (which is what's supposed to happen according to the spec from my understanding). Be sure to check for your state object in your handler before executing your code to make sure you don't run code you don't intend to on a page load.

One final note: if you're using jQuery to handle events, you'll need to use event.originalEvent.state to refer to the state object.

这篇关于当后退按钮触发popState时，我怎样才能防止页面刷新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！