• notice
  • Congratulations on the launch of the Sought Tech site

HTML5 pushstate, popstate operation history without refresh to change the current url

1. Know window.history

window.historyRepresents the history of the window object, which is a global object that is actively generated by the user and controlled by JavaScript scripts. The window historyobject . It exposes some very useful methods and properties, allowing you to freely move forward and backward through the history.

1. Forward and backward history

To step back in the history, do this:

window.history.back();

It's like when the user hits the browser's back button.

Similarly, you can move forward, just like clicking the forward button in the browser, like this:

window.history.forward();

2. Move to the specified history point

You can use the go() method to load pages from the current session's history by specifying a number relative to the current page position (the current page position index is 0, the previous page is -1, and the next page is 1).

To go back one page (equivalent to calling back()):

window.history.go(-1);

Move forward one page (equivalent to calling forward()):

window.history.go(1);

Similarly, by passing parameter 2, you can move forward 2 record points. You can check the value of the length property to see how many points are in the history stack:

window.history.length;

2. Modify the historical record point

HTML5's new API extends window.history, making history points more open. It can store the current historical record point, replace the current historical record point, monitor the historical record point, and briefly explain them one by one.

1. Store the current history point

The storage method is similar to the array push ( Array.push()), and a new history record point is added in window.history, for example:

// The current url is: http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @status object: extra object to record history points, can be empty
// @page title: Currently not supported by all browsers
// @optional url: the browser will not check whether the url exists, only change the url, the url must be the same domain, not cross-domain
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");</pre>
After executing the pushState method, the url address of the page is http://qianduanblog.com/post-1.html.

2. Replace the current history point

window.history.replaceStateand  window.history.pushStatesimilar, the difference is that replaceStateit will not window.historyadd a new historical record point in , its effect is similar window.location.replace(url), it will not add a new record point in the historical record point. Using the replaceState()method .

3. Monitor historical record points

Listening to the history point, intuitively can be considered as monitoring the change of the URL, but will ignore the hash part of the URL, listen to the hash part of the URL, HTML5 has a new API onhashchange, my blog also mentioned this method and cross-browser Compatible solutions. You can use window.onpopstateto monitor the changes of the url, and you can get the status object stored at the historical record point, that is, the json object mentioned above, such as:

// The current url is: http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
// Get the json object stored at this history point
var json=window.history.state;
// Click once to go back to: http://qianduanblog.com/index.html
// The obtained json is null
// Click again to advance to: http://qianduanblog.com/post-1.html
// Get json as {time:1369647895656}
}

Worth noting: JavaScript scripts execute window.history.pushStateand  window.history.replaceStatedo not fire onpopstateevents .

Another thing to note is that Google Chrome and Firefox react differently when the page is first opened, Google Chrome oddly triggers the onpopstateevent , while Firefox doesn't.


Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

author

buy lipitor generic & lt;a href="https://lipiws.top/"& gt;order atorvastatin 20mg online& lt;/a& gt; buy lipitor 40mg for sale

Nerghq

2024-03-09

Leave a Reply

+