Explication détaillée du mode Historique en HTML5-Tutoriel H5-php.cn

Explication détaillée du mode Historique en HTML5

黄舟

Libérer： 2017-07-18 13:51:33

original

2382 Les gens l'ont consulté

J'ai récemment vu l'implémentation du routage en mode Historique HTML5 dans vue-router, puis je suis allé étudier l'Histoire HTML5. Au fait, j'ai utilisé jquery pour écrire une implémentation similaire à l'Histoire HTML5. mode router dans vue-router , afin d'atteindre l'objectif de s'entraîner et de se familiariser avec celui-ci.

1. history.pushState

history.pushState(state, title, url);

Copier après la connexion

Les premier et deuxième paramètres ci-dessus peuvent être vides, principalement le premier Trois paramètres, représentant l'adresse du nouvel enregistrement historique. Le navigateur ne chargera pas cette URL après avoir appelé la méthode pushState(). La nouvelle URL ne doit pas nécessairement être une adresse absolue. Si elle est relative, elle doit être relative. vers l'URL actuelle

2. history.replaceState

history.replaceState(state, title, url);

Copier après la connexion

window.history.replaceState et window.history .pushState est similaire, la différence est que replaceState n'ajoutera pas de nouveau point d'enregistrement historique dans window.history. Son effet est similaire à window.location.replace(url), qui n'ajoutera pas de nouveau point d'enregistrement dans le point d'enregistrement historique. .

3. window.onpopstate

pour surveiller les changements d'URL

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

//或者
window.onpopstate = function(){}

Copier après la connexion

fenêtre d'exécution du script javascript. history.pushState et window.history.replaceState ne déclencheront pas l'événement onpopstate. Cliquer en avant ou en arrière dans le navigateur déclenchera

Les réactions de Google Chrome et Firefox sont différentes lors de la première ouverture de la page. Chrome déclenche l'événement onpopstate, mais pas Firefox

4. Vous trouverez ci-dessous un exemple de mode HTML5 similaire à vue-router, qui sert uniquement à approfondir la compréhension et est écrit de manière très grossière.

<!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 += &#39;<li>&#39;+data2.data[i].name+&#39;</li>&#39;
                    }
                    $(&#39;.ptting&#39;).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 += &#39;<li>&#39;+data2.data[i].name+&#39;</li>&#39;
                    }
                    $(&#39;.ptting&#39;).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>

Copier après la connexion

Au fait, je posterai un code serveur dans node.js Pour tester, j'en ai simplement écrit un

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

app.use(router)

app.listen(3000)

Copier après la connexion

 注意：history.pushState({pageIndex : 1}, "", "http://127.0.0.1:3000/lmw/"+query)这里第三个参数写了完整的绝对路径，如果写成"/lmw/"+query这样的相对路径，会随着query值得增加无限在url后面追加，因为相对路径它一定是相对于当前的URL

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!