Home > Developer > Web Develop
What is popstate used for?
In short, HTML5 's new API to control browser history.
Second, how to manipulate the browser history in the past?
The Window.history object, which contains two values of length and state, inherits several function functions, such as back, forward, go, and so on, on its __proto__
Before popstate, we can use back, forward, go to the history of the retreat and forward operation.
For example:
History.back (); (step back, use History.go (-1) to achieve back effect)
disadvantage: can only operate forward and backward, but can not control where to go after, History.length will only maintain the original state
Third, how to use Popstate?
HTML5 's new API expands the Window.history, making the history point more open. You can store the current history point Pushstate, replace the current history point replacestate, and listen to the popstate of the historical record point.
Pushstate, replacestate both use the same.
How to use:
History.pushstate (Data,title,url);
The first parameter data is the value of the state, the second argument is the title of the page, but all browsers ignore this parameter, passing an empty string is good; the third parameter URL is the link you want to go to;
Replacestate usage is similar, for example: History.replacestate ("Home", "", location.href+ "#news");
The difference between the two : Pushstate will change history.length, and replacestate does not change history.length
By contrast, we can see the difference between Pushstate and replacestate (note the changes in History.length):
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Graphic using HTML5 popstate How to play the browser history</title></Head><Body><spanclass= "Js-news">News</span><spanclass= "Js-music">Music</span><Script> varLocationhref=Location.href; Document.addeventlistener ("Click", function(event) {varTarget=Event.target; if(Target.classname== "js-news") {history.pushstate ("Home Page", "", Locationhref+ "#news"); } Else if(Target.classname== "Js-music") {history.pushstate ("Music", "", Locationhref+ "#music"); } }); /*Document.addeventlistener ("click", Function (event) {var target = Event.target; if (Target.classname = = "Js-news") {history.replacestate ("Home", "" ", Locationhref +" #news "); }else if (target.classname = = "Js-music") {history.replacestate ("Music", "" ", Locationhref +" #music "); } });*/Window.addeventlistener ("popstate", function() {console.log (history.state); })</Script></Body></HTML>View Code
Iv. Monitoring Browser status (popstate) Change events
Can be understood as listening to the browser back, forward operations, as long as the back or forward will be triggered. In the demo above, we do the following: open page → Click on "News" → Click on "Music" → then click "News", resulting in 4 history records. Then listen for browser back and forward status changes as shown in:
Graphic using HTML5 popstate How to play the browser history
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
