A detailed description of JavaScript history objects

Length

The History.length property holds the number of URLs for the history record. Initially, the value is 1. Because the ie10+ browser returns 2 at initial time, there is a compatibility issue, so this value is not commonly used

Jump method

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

If the moved position exceeds the access history boundary, the above three methods do not error, but silent failure

　　[note] when using history, pages are typically loaded from the browser cache, rather than requiring the server to send new pages again. Do not trigger onload

Record of change of increment

　　HTML5 adds two new methods to the History object, History.pushstate () and History.replacestate (), which are used to add and modify records in the browsing histories. The State property is used to hold the Record object, while the Popstate event is used to listen for changes in the history object

　　[note]IE9 does not support

"Pushstate ()"

The History.pushstate () method adds a state to the browser history. The Pushstate () method has three parameters: A Status object, a caption (now ignored), and an optional URL address

　　　　history.pushState(state, title, url);

The state object--status object is a JavaScript object created by the Pushstate () method that is related to the history record. 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 record. If you do not need this object, you can fill in 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, or pushstate () will throw an exception. This parameter is optional and is set to the current URL of the document if it is not specifically marked

Assuming the current URL is example.com/1.html, use the Pushstate method to add a new record to the browse record (History object)

var stateobj = {foo: ' Bar 'page 2 ', ' 2.html ');

After adding this new record, the browser address bar immediately displays example.com/2.html, but does not jump to 2.html, and does not even check whether 2.html exists, it just becomes the latest record in browsing history. If you visit google.com 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 rewind button again, the URL will display 1.html, the content is unchanged

In summary, the Pushstate method does not trigger a page refresh, only causes the history object to change, the address bar display address changes

If the URL parameter of pushstate, set a new anchor value (that is, hash), does not trigger the Hashchange event, even if the new URL and the old only on the hash of the difference

If a cross-domain URL is set, an error is made. The purpose of this design is to prevent malicious code from letting users think that they are on another site

"Replacestate ()"

The parameters of the History.replacestate method are identical to the Pushstate method, except that the Replacestate () method modifies the current history entry instead of creating a new entry

Assuming the current page is example.com/example.html

History.pushstate ({page:1}, ' title 1 ', '? page=1 '2}, ' Title 2 ', '? page=2 '3}, ' title 3 ', '? page=3 ') ; History.back ()//  URL shown as http://example.com/example.html?page=1history.back () // URL displayed as http://example.com/example.htmlhistory.go (2)//  URL shown 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 there is a change in the browsing history of the same document (that is, the historical object)

　　 Note that just calling the Pushstate method or the Replacestate method does not trigger the event, only the user clicks the Browser rewind button and the Forward button, or uses JavaScript to call back (), Forward ( ), The Go () method is not triggered. In addition, the event is only for the same document, and if the browsing history of the switch causes a different document to be loaded, the event does not trigger

When used, you can specify a callback function for the Popstate event. The parameter to this callback function is an event object whose State property points to the status object provided by the Pushstate and Replacestate methods for the current URL (that is, the first parameter of both methods)

function (event) {Console.log (' location: ' + document.location), Console.log (' state: ' + json.stringify (　　event.state));}; 

The event.state in the above code is the state object that is bound to the current URL through the Pushstate and Replacestate methods

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

　　var currentState = history.state;

Round-Trip Caching

By default, the browser caches the page in the current session, and when the user taps the forward or Back button, the browser loads the page from the cache

The browser has a feature called "Round-trip cache" (Back-forward cache or Bfcache) that can speed up the conversion of a page when the user uses the browser's back and forward buttons. This cache not only preserves the page data, but also preserves the state of the DOM and JavaScript, and actually saves 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-Browser does not support

"Pageshow"

The Pageshow event is triggered when the page loads, including both the first load and the load from the cache. If you want to specify the code that runs every time the page loads (whether or not cached from the browser), you can put the listener function in this event

The first time it is loaded, its trigger order is queued behind the load event. The Load event does not fire when loading from the cache, because the Web page looks in the cache normally as it does after the Load event's listener function runs, so you do not have to repeat it. Similarly, if the page is loaded from the cache, the JavaScript script initialized within the page (such as the listener function for the domcontentloaded event) will not execute

　　[note] Although the object of this event is document, its event handlers must be added to the window

The Pageshow event has a persisted property that returns a Boolean value. This property is false when the page is first loaded or when it is not loaded from the cache, which is true when the page is loaded from the cache

(functionvar showcount = 0function() {  console.log (' Loaded 'function(e) {  = e | | event;   ++;   + ' Times '); }})();

　　[note] The example above uses a private scope to prevent the variable showcount from entering the global scope. If you click the Refresh button on the browser, the Showcount value is 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 is triggered before the Unload event. As with the Pageshow event, Pagehide fires on document, but its event handlers must be added to the Window object

　　[note] the page that specifies the OnUnload event handler is automatically excluded from Bfcache, even if the event handler is empty. The reason is that onunload is most often used to undo the actions performed in onload, but skipping the onload and showing the page again is likely to cause the page to be unhealthy.

The event object for Pagehide events also contains the persisted attribute, but its purpose is slightly different. If the page is loaded from Bfcache, then the value of persisted is true, and if the page is saved in Bfcache after the unload, the persisted value is set to true. Therefore, when Pageshow is first triggered, the value of persisted must be false, and persisted will become true when the pagehide is first triggered (unless the page is not saved in Bfcache)

function= e | | event; Console.log (e.persisted);}

How to use:

1. Cancel the default return operation

function pushhistory () {  var state = {       "title",       "#"         }  " Title "," # ");   } Pushhistory ()

2, History.js for compatibility with HTML4, can also monitor pushstate and replacesate

A detailed description of JavaScript history objects