How to realize History pattern in HTML5

This article will explain in detail how to achieve the History pattern in HTML5. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. History.pushState

History.pushState (state, title, url)

The first and second parameters above can be empty, mainly the third parameter, indicating the address of the new history. The browser will not load this URL after calling the pushState () method. The new URL does not have to be an absolute address. If it is relative, it must be relative to the current URL.

II. History.replaceState

History.replaceState (state, title, url)

Window.history.replaceState is similar to window.history.pushState, except that replaceState does not add a new history point to window.history. Its effect is similar to _ window.location.replace (url). It does not add a new record point to the history point.

3. _ window.onpopstate

To monitor url changes.

Window.addEventListener ("popstate", currentState =

The execution of window.history.pushState and window.history.replaceState by javascript scripts does not trigger onpopstate events, but when the browser clicks forward or backward.

Google browser and Firefox react differently when the page is first opened. The strange thing about Google browser is that it triggers the onpopstate event, while Firefox does not.

Fourth, the following post an example of the HTML5 pattern similar to vue-router, which is purely to deepen the understanding and write very roughly.

HTML5 History mode (second edition). Container-bg {width:1000px; overflow: hidden; margin-right: 0 auto;} .pagination {width:1000px; background-color: # d8d8d8; height: 30px; line-height: 30px;} .pagination li {width: 100px; height: 30px; background: red; float: left; cursor: pointer; color:#fff; margin: 0 10px 00;} 123history.replaceState (null, "Page title", "http://127.0.0.1:3000/lmw/0");" / / when the page loads, modify the url address var searchObject = {}; / * this object is used to store the URL of the following pushState as the key value, and the ID to be queried by ajax is val * for example: searchObject = {"http://127.0.0.1:3000/lmw/0":0}*/var factory = function () {var addva = _ document.location.href;// to get the complete URLvar query = searchObject [addva] / / find the corresponding value of the URL query = (query = = undefined? 0: query); / / initiate the ajax load page $.get ("/ page?page=" + query,function (data) {var data2 = JSON.parse (data); var ele = "" for (var iTuno)