Maison > Article > interface Web > Explication détaillée de l'utilisation du mode Historique dans H5

Explication détaillée de l'utilisation du mode Historique dans H5

php中世界最好的语言original: 2018-03-26 16:47:193394parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du mode Historique dans H5. Quelles sont les précautions lors de l'utilisation du mode Historique dans H5. Voici des cas pratiques, jetons un coup d'oeil.

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

1. history.pushState

history.pushState(state, title, url);

Les premier et deuxième paramètres ci-dessus peuvent être vides, principalement le troisième paramètre, indiquant 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 à l'URL actuelle

<.>

2. history.replaceState

history.replaceState(state, title, url);

window.history.replaceState est similaire à window.history.pushState, la différence est que replaceState ne sera pas in L'effet de l'ajout d'un nouveau point d'enregistrement historique dans window.history est similaire à celui de window.location.replace(url), qui n'ajoutera pas de nouveau point d'enregistrement au point d'enregistrement historique.

3. window.onpopstate

pour surveiller les changements d'URL

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

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

Google Chrome et

Firefox sur la page. La réaction après l'ouverture est différente. Google Chrome déclenche étrangement l'événement onpopstate, mais pas Firefox. Les exemples de modèles sont uniquement destinés à approfondir la compréhension et sont rédigés de manière très approximative.

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

Remarque : historique. pushState ({pageIndex : 1}, "", "http://127.0.0.1:3000/lmw/"+query) Le troisième paramètre écrit ici le chemin absolu complet s'il est écrit sous la forme "/lmw/"+query. , Le chemin relatif sera ajouté à l'URL à mesure que la valeur de la requête augmente, car le chemin relatif doit être relatif à l'URL actuelle

<!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>

Le serveur place data0.json, data1.json et data2.json pour simuler la récupération de données depuis la base de données. , le serveur a la valeur d'index (0/1/2) envoyée depuis le front-end pour correspondre au fichier data*.json lu, puis l'envoie au front-end

je crois. vous maîtrisez la méthode après avoir lu le cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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)

Lecture recommandée :

Téléchargement asynchrone de fichiers H5

Correspondance dynamique de la zone de saisie de la liste de données et des données de la base de données d'arrière-plan

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Balises de liste HTML5 couramment utiliséesArticle suivant：Balises de liste HTML5 couramment utilisées

Articles Liés

Voir plus