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

This article mainly introduces "JavaScript history object example analysis". In daily operation, I believe many people have doubts about JavaScript history object example analysis. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "JavaScript history object example analysis". Next, please follow the editor to study!

Foreword:

When we browse a web page, we may not pay much attention to the forward and backward operations of the web page, but when developing, do you ever think about what happened to the jump between pages, how to save the page information in the browser, and whether you need to reload the page when you return to the previous page? there are a lot of questions. In order to solve these problems, you first need to know the history object under window in the browser. This article summarizes the relevant knowledge points of this object in detail.

The history object represents the navigation history of the user since the current window was first used. Because history is a property of window, each window has its own history object. For security reasons, this object does not expose the URL that the user has visited, but it allows you to move forward and backward without knowing the actual URL.

1. Routing navigation

The history.go () method can navigate in any direction in the user history, either forward or backward. This method takes only one parameter, which can be an integer indicating how many steps forward or backward.

History.go (- 1); / / backward page history.go. Go (1); / / forward page history.go (2); / / forward two pages / / go () has two abbreviated methods: back () and forward (). History.back (); / / back one page history.forward (); / / forward one page

The history object also has a length property, and history.length = = 1 indicates that this is the first page in the user window.

Histroy's go method, back method, forword method, and the user's manual forward and back buttons in the browser all cause the page to jump after refreshing.

2. Historical state management API (1) hashchange event

A new feature of the hashchange:history object is hashchange, which is triggered when the hash of the page URL changes, and developers can perform certain actions at this time. When the fragment identifier of the URL changes, the hashchange event (the URL section following the # symbol, including the # symbol) is triggered. On the other hand, the state management API allows developers to change the browser URL without loading new pages.

For example: pushState and replaceState methods, the page will not be refreshed, but the route will change.

(2) popstate event

The popstate event is triggered when the activity history entry changes. If the activated history entry is created by a call to history.pushState (), or is affected by a call to history.replaceState (), the state property of the popstate event contains a copy of the state object of the history entry. It is important to note that calling history.pushState () or history.replaceState () does not trigger the popstate event. This event is triggered only when a browser action is made, such as when the user clicks the browser's fallback button (or calls the history.back () or history.forward () method in the Javascript code).

(3) history.pushState () method

The pushState () method adds a state (state) to the history stack of the current browser session. This method takes three parameters: a state object, a title of the new state, and an (optional) relative URL. After the pushState () method is executed, the status information is pushed to the history, and the browser address bar changes to reflect the new relative URL. The URL column displays the new address, but the page is not loaded or even checked for existence. This method adds history.length

(4) history.replaceState () method

The replaceState () method modifies the current history entity. This method takes three parameters: a state object, a title of the new state, and an (optional) relative URL. After the replaceState () method is executed, the current state object or the URL of the current historical entity is updated in response to the user's action. The URL bar displays the new address, but the page is not loaded or even checked for existence. This method does not add history.length.

Click me to go to the previous page

_ window.onload = function () {console.log (window.history);} window.addEventListener ('hashchange', function () {console.log (' The hash has changeable')}, false); window.addEventListener ('popstate', (event) = > {console.log ("location:" + _ document.location + ", state:" + JSON.stringify (event.state));}) Function handleNext () {const state = {userId: "1234", page: "2"} const title ='2 'const url =' page2.html' window.history.pushState (state, title, url) console.log (window.history) } function handleLast () {const state = {userId: "1234", page: "21"} const title ='- 'const url =' page21.html' window.history.replaceState (state, title, url) console.log (window.history);}

The running results are as follows:

3. Supplement: hash of URL

The hash of URL, that is, the anchor point (#), essentially changes the href attribute of _ window.location. We can change the href by directly assigning location.hash, but the page does not refresh.

As shown in the following figure:

At this point, the study of "JavaScript history object example Analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.