The browser window has a history object, which is used to save browsing history.
If the current window has visited three URLs, then the history object includes three items, and the history.length property is equal to 3.
The history object provides a series of methods that allow moving between browsing history:
window.history.back(): Move to the previous visited page, equivalent to the browser's back key.
window.history.forward(): Move to the next visited page, equivalent to the browser's forward key.
window.history.go(num): accepts an integer as a parameter and moves to the page specified by the integer. For example, go(1) is equivalent to forward(), and go(-1) is equivalent to back().
window.history.pushState(): HTML5 adds two new methods to the history object, window.history.pushState() and window.history.replaceState(), which are used to add and modify records in the browsing history.
Note: 1. If the moved position exceeds the boundary of the access history, the above three methods do not report an error, but fail silently.
2. When setting up, the page is usually loaded from the browser cache instead of re-asking the server to send a new web page.
Let’s focus on: window.history.pushState()window.history.pushState(state, title, utl), creates a history entity in the page. Add directly to history.
Among the parameters:
state: A state object related to the specified URL. When the popstate event is triggered, this object will be passed into the callback function. If this object is not needed, null can be filled in here.
title: The title of the new page, but all browsers currently ignore this value, so null can be filled in here.
url: The new URL must be in the same domain as the current page. Your browser's address bar will display this URL.
Note: The pushState method will not trigger a page refresh, it will only cause the history object to change, and the address bar will react.
Example implementation:Html5 listens and intercepts the Android return key method as follows:
1. Listen to the popstate event
window.addEventListener(popstate, function(){ //doSomething}, false)2. Cancel the default return operation, that is, listen to intercept the return key: add an empty history entity as a replacement for the original history entity
window.history.pushState(null, null, #);
Example:
<!DOCTYPE html><html> <meta name=viewport content=width=device-width> <script type=text/javascript> var count = 0; window.history.pushState(null, null, #); window.addEventListener (popstate, function(e) { window.history.pushState(null, null, #); document.getElementById('logView').innerHTML = User clicks return + (++count) }) </script><body> <p id=logView>test</p></body></html>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.