Solution to the problem of forced refresh of the previous page returned by WeChat built-in browser, and force refresh of the browser returned

Solution to the Problem of force refresh when the built-in browser returns to the previous page, and the browser returns force refresh

When the built-in browser returns to the previous page and the previous page contains AJAX code, the page will be forcibly refreshed, which severely affects the user experience. What we want is: when the previous page is returned, the page remains in the original state, the data obtained by AJAX is still there, and the scroll bar is also in the original position.

BINGO ~

PassHTML5OfHistory API+CacheThis can be done.

 

Execution principle:

1.0 passHistory APIOfHistory. pushStateOrHistory. replaceStateSave the AJAX status;

2.0 cache the data obtained by AJAX at the same time (you can consider using the H5LocalStorageOrSessionstorage);

3.0 when this page is returned, obtainHistory. stateIf it is not empty, it indicates the Saved state. All we need to do is restore to this state;

4.0 read and load the cached data. If pagination is involved and it is in the form of rolling loading, you need to set the current page to the number of pages in history. state.

 

Technical points:

History API:

The HTML5 history API only contains two methods:history.pushState()Andhistory.replaceState()And one event:window.onpopstate.

① History. pushState ()

Its full body is history.pushState(stateObject, title, url), Including three parameters.

The first parameter is a State object. It can be understood as an element used to store custom data. It is associated with a url that acts as a parameter at the same time.

The 2nd parameter is the title, which is a string. Currently, all types of browsers ignore it (which may be enabled later and used as the page title), so it does not matter if it is set to anything. We recommend that you set it to a null string.

The first parameter is the URL address, which is generally simple? The relative path of the parameter style such as page = 2, which is automatically based on the current URL. Note that the URL of this parameter must be the same as the URL of the current page. Otherwise, an error is thrown.

CallpushState()The method generates a new historical record to facilitate navigation by using the browser's "backward" and "Forward" ("backward" is a commonly used button ). In addition, we can see from the same origin policy of the URL,HTML5 history APIThe starting point is very clear, that is, a single site without a jump can also save its status as multiple historical records of the browser. When the site is reloaded with historical records, the site can be directly loaded to the corresponding status.

 

② History. replaceState ()

It andhistory.pushState()The methods are basically the same, with only one difference,history.replaceState()It will not generate a new history, but will replace the current history.

 

③ Window. onpopstate

The opposite of push is pop. It can be guessed that this event is triggered when the browser extracts the historical records and loads them. But in fact, its conditions are relatively harsh, almost only by clicking the browser's "forward", "back" navigation buttons, or called by JavaScripthistory.back()This event is triggered only when the navigation method and the two historical records before and after the switch belong to the same webpage document.

 

The above "same webpage document" can be understood as the document in the JavaScript environment is the same, rather than the same basic URL (excluding various parameters. That is to say, as long as a reload occurs (whether to jump to a new site or continue on this site), the global JavaScript environment has changed,popstateEvents are not triggered.

 

PopstateEvents are designed to work with the previous two methods. Generally, this event is triggered only when multiple historical records of the same site are set through the first two methods and are navigated between them (forward or backward. At the same time, the status object (1st parameters) set by the previous two methods will also passevent.stateReturn.

 

For detailed code examples, click here (portal)