Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use the History object in javascript". In the daily operation, I believe that many people have doubts about how to use the History object in javascript. The editor consulted all kinds of materials and sorted out a simple and easy-to-use operation method. I hope it will be helpful to answer the doubt about "how to use the History object in javascript". Next, please follow the editor to study!

Length

The history.length property holds the number of URL in the history. Initially, the value is 1. Because IE10+ browsers initially return 2, there is a compatibility problem, so this value is not commonly used

Jump method

Go (), back (), and forward ()

If the location is moved beyond the boundary of the access history, the above three methods do not report an error, but silently fail.

[note] when using history, the page is usually loaded from the browser cache rather than re-requiring the server to send a new web page. Do not trigger onload

Add and change records

HTML5 adds two new methods, history.pushState () and history.replaceState (), to the history object to add and modify records in the browsing history. The state property is used to hold the record object, while the popstate event is used to listen for changes to the history object.

[note] ie9 does not support

[pushState ()]

The history.pushState () method adds a state to the browser history. The pushState () method takes three parameters: a state object, a title (now ignored), and an optional URL address

History.pushState (state, title, url)

State object-- the state object is a history-related javascript object created by the pushState () method. The popstate event is triggered when the user is directed to a new state. The state property of the event contains the state object of the history. If you do not need this object, you can enter null here

Title-the title of the new page, but all browsers currently ignore this value, so you can fill in null here

URL-- this parameter provides the address of the new history. The new URL must be in the same domain as the current URL, otherwise pushState () will throw an exception. This parameter is optional and will be set to the current URL of the document if it is not specifically marked

Assuming that the current URL is example.com/1.html, use the pushState method to add a new record to the browsing record (history object)

Var stateObj = {foo: 'bar'}; history.pushState (stateObj,' page 2, '2.html')

After adding the new record above, the browser address bar immediately displays example.com/2.html, but it doesn't jump to 2.html or even check for the existence of 2.html, it just becomes the latest record in browsing history. If you visit google.com at this time, and then click the back button, the url of the page will display 2.html, but the content is still the original 1.html. Click the back button again, and url will display 1.html with the same content.

In short, the pushState method does not trigger a page refresh, but only causes a change in the history object and a change in the display address of the address bar

If the url parameter of pushState is set to a new anchor point value (that is, hash), the hashchange event will not be triggered, even if the new URL is different from the old one only on the hash

If a cross-domain URL is set, an error will be reported. The purpose of this design is to prevent malicious code from making users think they are on another website

[replaceState ()]

The parameters of the history.replaceState method are exactly the same as the pushState method, except that the replaceState () method modifies the current history entry instead of creating a new one

Assume that the current web page is example.com/example.html

History.pushState ({page: 1}, 'title 1,'? page=1'); history.pushState ({page: 2}, 'title 2,'? page=2'); history.replaceState ({page: 3}, 'title 3,'? page=3') History.back () / / url display as http://example.com/example.html?page=1history.back()// url display as http://example.com/example.htmlhistory.go(2)// url display as http://example.com/example.html?page=3

[state]

The history.state property returns the state object of the current page

History.pushState ({page: 1}, 'title 1,'? page=1'); history.state// {page: 1}

[popstate event]

The popstate event is triggered whenever the browsing history of the same document (that is, the history object) changes

[note] it is important to note that simply calling the pushState method or the replaceState method does not trigger the event, only when the user clicks the browser back button and the forward button, or when the user calls the back (), forward (), go () methods using javascript. In addition, this event is only for the same document, and it will not be triggered if the browsing history switch causes different documents to be loaded.

When in use, you can specify a callback function for the popstate event. The parameter to this callback function is an event event object whose state property points to the state object provided by the pushState and replaceState methods for the current URL (that is, the first parameter of the two methods)

The event.state in the above code is the state object bound by the current URL through the pushState and replaceState methods

This state object can also be read directly through the history object

Var currentState = history.state

Round trip caching

By default, the browser caches pages in the current session (session), and when the user clicks the forward or back buttons, the browser loads the page from the cache

Browsers have a feature called "round trip cache" (back-forward cache or bfcache), which can speed up the conversion of pages when users use the browser's back and forward buttons. This cache holds not only the page data, but also the state of DOM and javascript; it actually keeps the entire page in memory. If the page is in bfcache, the load event will not be triggered when the page is opened again

[note] IE10- browsers do not support

[pageshow]

The pageshow event is triggered when the page is loaded, both the first load and the load from the cache. If you want to specify the code that runs each time the page is loaded (whether from the browser cache or not), you can put it in the listener function for this event

When it is loaded for the first time, it is triggered in order after the load event. When loaded from the cache, the load event is not triggered, because the page in the cache usually looks like the listener function for the load event, so it does not have to be repeated. Similarly, if the page is loaded from the cache, the JavaScript script initialized within the page (such as the listener function for DOMContentLoaded events) will not be executed.

[note] although the target of this event is document, its event handler must be added to window

The pageshow event has a persisted property that returns a Boolean value. When the page is first loaded or not loaded from the cache, this property is false;. When the page is loaded from the cache, this property is true.

[note] the above example uses a private scope to prevent the variable showCount from entering the global scope. If you click the browser's Refresh button, the value of showCount will be reset to 0 because the page has been completely reloaded

[pagehide]

The pageshow event corresponds to the pagehide event, which is triggered when the browser unloads the page and before the unload event. Like the pageshow event, pagehide is triggered on top of document, but its event handler must be added to the window object

[note] pages that specify onunload event handlers are automatically excluded from bfcache, even if the event handlers are empty. The reason is that onunload is most commonly used to undo actions performed in onload, and displaying the page again after skipping onload is likely to cause the page to be abnormal.

The event object of the pagehide event also contains the persisted property, but for a slightly different purpose. If the page is loaded from bfcache, the value of persisted is true;. If the page is saved in bfcache after unloading, the value of persisted will also be set to true. Therefore, when pageshow is first triggered, the value of persisted must be false, and when pagehide is triggered for the first time, persisted becomes true (unless the page will not be saved in bfcache)

_ window.onpagehide = function (e) {e = e | | event;console.log (e.persisted);}

How to use it:

1. Cancel the default return operation

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

2. History.js is used for compatibility with html4, and can also monitor pushState and replaceSate.

At this point, the study on "how to use History objects in javascript" 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.