History mode in HTML5

Author：Eve Cole Update Time：2025-02-07 01:36:01

Recently I saw the implementation of Vue-Router's HTML5 History mode, and then studied the HTML5 HISTORY by the way. The following are some of my own understanding. By the way Practice your hand, familiar with your familiar purpose.

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 historical record. The browser will not load this URL after calling the PushState () method. If it is relative, it must be relative to the current URL

2. History.replaceState

 history.replaceState (state, title, url);

Window.history.replaceState is similar to Window.history.pushState. The difference is that replacestate will not add a new historical record point in Window.history. The effect is similar to Window.Location.RePlace (URL). A record point is added to the record point.

3. Window.onpopState

Come and listen to the changes of the URL

 Window.adDeventListener (popState, Function () {varcrentState = history.State;/** program to be executed after triggering the event*/}); // or window.onpopState = Function () {}

JavaScript script executes window.history.pushstate and window.history.replaceState will not trigger the onPopState event.

The reaction of Google browser and Firefox browser on the page for the first time on the page is different. Google browser is strange to recover the onPopState event, while the Firefox browser will not

Fourth, an example of HTML5 mode similar to Vue-Router is posted below. It is purely deepened and rough.

 <! Doctype html> <html Lang = EN> <Head> <meta Charset = UTF-8> <Title> HTML5 History mode (second edition) </title> <link R = styleSheet type = text/css href = csss /style.css> <Style Type = Text/CSS> .container-BG {Width: 1000px; Overflow: HIDDEN; Margin-Right: 0 AUTO;} .pagination {width: 1000px; Background-C. OLOR: #D8d8d8; Height: 30px; line-height: 30px;} .pagination li {width: 100px; height: 30px; background: red; left: left; color: #fff; margin: 0px 0 0;} </style> </head> <body> <div class = container-bg> <ul class = pagination> <li> 1 </li> <li> 2 </li> <li> 3 </ul> </ul> </ul> </ul> </ul> </ul> </ul> ul class = ptting> </ul> </div> <script type = text/javascript src = js/jquery-3.2.1.min.js> </script> <Script Type = Text/Javascript> Histor y.replaceState ( null, page title, http://127.0.0.0.1:3000/lmw/0); When the page is loaded, modify the URL address to var searchObject = {};/*This object is used to save the URL of the PushState as the following. KEY value, the ID that Ajax wants to query is Val *For example: searchObject = {http://127.0.0.1:3000/lmw/0:0:0 }/ var factor = function () {var addva = document.href; // Get the complete url var Query = Searchobject [addva]; // Find the value corresponding to the url query = (query == Undefined? 0: query); // initiate ajax load page $ .Get (/Page? Page =++++++++++++++++++++++++++++++ query, function (data) {var data2 = json.parse (data); var eLE = for (var I = 0; i <data2.data.length; i ++) {eLE+= '<li>'+data2.data [i] .Name+'</li>'} $ ('. ptting'). html (eLE)})}; // Click the paging switch event $ (. Pagination li) .click (function () {var Query = $ (this) .index (); $ .get (/page? Page =+query, function (data) {var data2 = json.parse (data); var ele = for (var I = 0; i <data2. Data.Length; I ++) {eLE+= '<li>'+data2.data [i] .name+'</li>'} $ ('. ptting'). 1},, http://127.0.0.1:3000/lmw/+que); // Store the URL of the current PushState and the value of the AJAX query to use Searchobject [http:///http:// /127.0.0.1:3000/lmw/+qury] = Query})})}) // Trigger the PopState event if the browser goes forward or retreats. Cure }); Factory ()}; </script> </body> </html>

By the way, post a server code in node.js. In order to test

 Var fs = request ('fs') var path = reques ('path') var express = request = request ('expression') var app = express (); app.use (express.static ('./ position')); var router = express.router (); router.get ('/page', function (req, res) {var page = req.qury.page try {var text = fs.Readfilesync Ge+' .json '); Res.json (text.tostring ())} Catch (err) {res.send (' haha! Silly, no pull!)}) app.use (router) app.Listen (3000)

Note: History.pushstate ({pageINDEX: 1}, http://127.0.0.1:3000/lmw/+Query) The third parameter here writes a complete absolute path, if it is written as a relative The path will be added with the unlimited URL as Query, because the relative path it must be the current URL

The server is placed with data0.json, data1.json, data2.json to simulate the database to obtain data. The server has the index value (0/1/2) from the front end to match the data*.json file, and then Send to the front end

The above is the History mode in the HTML5 introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!