Shulou(Shulou.com)06/01 Report--

This article mainly introduces how pushstate uses monitoring and return events, which has a certain reference value. Interested friends can refer to it. I hope you can learn a lot after reading this article.

Pushstate and monitoring browser return to solve the problem

So you can use the pushstate method to change the url without refreshing the browser and when you return, you will return to this A page instead of the previous page. But at this time, we also need to listen to the return button to control the display and hiding of the component. This is also crucial. Otherwise, the component is not hidden, which is equivalent to no effect.

PushState

Method of use (in general)

Function pushHistory () {var state = {title: "title", url: "#"}; window.history.pushState (state, "title", "#");}

Parameter description:

PushState () takes three parameters: state is the js object, title is a title (which is now ignored), and an optional URL address.

Notes about pushstate

The browser will not request data from the server and directly change the url address, which can be similarly understood as a disguised version of hash;, but unlike hash, the browser records the history of pushState and can use the forward and backward functions of the browser.

Listen to the browser return button

Window.addEventListener ("popstate", function (e) {console.log (e); alert ("I have monitored the events of the browser's return button"); / / implement their own functions according to their own needs}, false) Thank you for reading this article carefully. I hope the article "how to use pushstate to monitor and return events" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.