How to use Pushstate to develop brushless page switching

Achieve the goal

Page jump (forward back, click, etc.) do not request the page again

The page URL is consistent with the content of the page presentation (in line with people's understanding of traditional Web pages)

In a way that does not support the descent of browsers into traditional Web pages

API to use

History.state

The corresponding state information under the current URL. If the current URL is not generated through pushstate or replacestate, then history.state is null.

History.pushstate (state, title, URL)

Adds the current URL and history.state to the history and replaces the current with the new state and URL. does not cause page refreshes.

State: The status information corresponding to the URL to jump to.

Title: Do not know what to use, to pass the empty string on the line.

URL: The URL address to jump to, not cross-domain.

History.replacestate

Replaces the current with the new state and URL. does not cause page refreshes.

State: The status information corresponding to the URL to jump to.

Title: Do not know what to use, to pass the empty string on the line.

URL: The URL address to jump to, not cross-domain.

Window.onpopstate

This column more highlights: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/tools/

History.go and History.back (including the user by the browser history forward Back button) triggered, and when the page is not brush (because the use of pushstate modified history) will trigger the Popstate event, when the event occurs, the browser from the history to take out the URL and the corresponding St The ATE object replaces the current URL and history.state. History.state can also be obtained through event.state.

Supportive judgment

if (' Pushstate ' in history) {...}

Realize the idea

The user modifies the current URL in the form of "click Trigger", "Operation History", and "Direct access URL". These three triggers can cause the browser to behave differently. If the page does not have a brush jump, then the page concrete display what content need JS to control, JS then need to according to some information to know what content should be displayed at present, this information is history.state. So we can keep the URL and the content one by one corresponding by just keeping the URL and history.state one by one corresponding. Most of the cases URL and history.state are one by one corresponding, but the way to access the page through the direct URL to enter the page, history.state is null, so we need to convert the URL to the corresponding history.state write. We cannot write directly to History.state, which needs to be written in a replacestate way. For browsers that do not support pushstate, the HREF jump page is modified to be equivalent to a direct access URL. The schematic diagram is as follows.

Author: cnblogs Clifford