Home > Article > Web Front-end > Detailed explanation of the use of History mode in H5

Detailed explanation of the use of History mode in H5

php中世界最好的语言Original: 2018-03-26 16:47:193393browse

This time I will bring you a detailed explanation of the use of the History mode in H5. What are the precautions when using the History mode in H5. The following is a practical case, let's take a look.

I recently saw the implementation of vue-router's HTML5 History mode routing, and then I went to study the history of HTML5. Here are some of my understandings. By the way, I used jquery to write an implementation similar to the HTML5 in vue-router. History mode router to achieve the purpose of practicing and becoming familiar with it.

1. history.pushState

history.pushState(state, title, url);

The first and second parameters above can be empty, mainly the third parameter, which means The address of the new history record. 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

2. history.replaceState

history.replaceState(state, title, url);

window.history.replaceState is similar to window.history.pushState, the difference is that replaceState will not be in window.history The effect of adding a new historical record point is similar to window.location.replace(url), which will not add a new record point to the historical record point.

3. window.onpopstate

to monitor url changes

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 触发事件后要执行的程序
    */                                            
});
//或者
window.onpopstate = function(){}

javascriptScript execution window.history.pushState and window.history.replaceState will not trigger the onpopstate event. Clicking forward or backward in the browser will trigger

Google Chrome and Firefox for the first time on the page. The opening response is different. Google Chrome strangely triggers the onpopstate event, but Firefox does not.

4. Post an HTML5 mode similar to vue-router below. The examples are purely for deepening understanding, but the writing is very rough.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 History 模式(第二版)</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css">
        .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 0 0;}
    </style>
</head>
<body>
    <p class="container-bg">
        <ul class="pagination">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul class="ptting"></ul>
    </p>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    history.replaceState(null, "页面标题", "http://127.0.0.1:3000/lmw/0");//当页面载入时候，把url地址修改
    var searchObject = {};/*此对象用来保存下面pushState的URL作为key值，ajax要查询的ID为val
                           *例如：searchObject = {"http://127.0.0.1:3000/lmw/0":0}*/
    var factory = function(){
        var addva = document.location.href;//获取完整URL
        var query = searchObject[addva];//找到该URL对应的值
        query = (query == undefined ? 0 :query);
        //发起ajax加载页面
        $.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)
                }) 
        };
        //点击分页切换事件
            $(".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').html(ele)                    
                    history.pushState({pageIndex : 1}, "", "http://127.0.0.1:3000/lmw/"+query);
                    //把当前pushState的url，和ajax查询的值存入对象，以供触发pushState事件的时候使用
                    searchObject["http://127.0.0.1:3000/lmw/"+query] = query
                })
            })
//浏览器前进或者后退的时候触发popstate事件
if (history.pushState) {
    window.addEventListener("popstate", function() {
        factory()                              
    });
    factory()
};
    </script>
</body>
</html>

By the way, I will post a server code in node.js. For testing, I simply wrote one

var fs = require('fs')
var path = require('path')
var express = require('express')
var app = express();
app.use(express.static('./public'));
var router = express.Router();
router.get('/page',function(req,res){
    var page = req.query.page
    try{
        var text = fs.readFileSync('./data'+page+'.json');
        res.json(text.toString())
    }catch(err){
        res.send('哈哈！傻逼，没有拉！')    
    }
})
app.use(router)
app.listen(3000)

Note: history.pushState({pageIndex: 1}, "", "http://127.0.0.1:3000/lmw/"+query) The third parameter here writes the complete absolute path. If it is written as a relative path like "/lmw/"+query, it will As the query value increases, it is appended after the url indefinitely, because the relative path must be relative to the current URL
The server puts data0.json, data1.json, and data2.json to simulate the database fetching data. The server is more The index value (0/1/2) sent from the front end is used to match the read data*.json file and then sent to the front end.

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting information. Other related articles on php Chinese website!

Detailed explanation of the use of History mode in H5

Related articles