Comment créer un enregistrement d'historique en javascript sans recharger la page (code)

Le contenu de cet article explique comment JavaScript peut créer un enregistrement historique (code) sans recharger la page. Il a une certaine valeur de référence. J'espère que cela vous sera utile.

Contexte

Récemment au travail, j'ai rencontré une telle exigence dans une application multipage, la même source de données doit être partagée sur plusieurs pages, et Switching. les pages ne rafraîchissent pas les données de la page et peuvent réaliser la fonction de retour en arrière des enregistrements d'historique ; car au début, seul l'effet de la réalisation de plusieurs pages sur une seule page était pris en compte et le traitement dans la pile d'historique n'était pas pris en compte, ce qui entraînait la page étant poussée hors de l'entrée en une seule fois. Plusieurs solutions sont résumées ci-dessous.

hash

Dans l'URL, # est appelé l'identifiant d'emplacement, qui représente un emplacement sur la page Web. Lorsque nous sommes entrés en contact pour la première fois avec la balise a, beaucoup d'entre nous ont tous opéré un saut de point d'ancrage, principalement via href Définissez la valeur d'ID de l'emplacement auquel vous souhaitez accéder. Au cours de ce processus, la page n'est pas actualisée, mais un nouvel enregistrement historique est ajouté ; en même temps, vous pouvez également y écrire une nouvelle valeur de hachage et détecter si la valeur de hachage a changé en écoutant l'événement hashchange. Lorsque nous cliquons à nouveau sur la page du masque contextuel, nous pouvons modifier manuellement la valeur de location.hash, de sorte qu'en cliquant sur window.history.back(), nous puissions restaurer l'historique

Exemple

Le code est le suivant :

nbsp;html>


    <meta>
    <title>Title</title>
    <style>
        body{
            background: #ccc;
        }
        .colorBlock {
            border: 10px solid #fff;
            height: 40vh;
            width: 40vh;
            margin: 20vh auto 10vh;
            color: #ffffff;
            font-size: 40px;
            line-height: 40vh;
            text-align: center;
        }
        .colorBlue{
            border: 10px solid #fff;
            height: 40vh;
            width: 40vh;
            margin: 20vh auto 10vh;
            color: #ffffff;
            font-size: 40px;
            line-height: 40vh;
            text-align: center;
            background: cornflowerblue;
        }
        .colorgray{
            border: 10px solid #fff;
            height: 40vh;
            width: 40vh;
            margin: 20vh auto 10vh;
            color: #ffffff;
            font-size: 40px;
            line-height: 40vh;
            text-align: center;
            background: lightcoral;
        }
        .colorgreen{
            border: 10px solid #fff;
            height: 40vh;
            width: 40vh;
            margin: 20vh auto 10vh;
            color: #ffffff;
            font-size: 40px;
            line-height: 40vh;
            text-align: center;
            background: greenyellow;
        }
        .btnBlock{
            text-align: center;
        }
        .btn{
            border: 5px solid #ffffff;
            font-size: 24px;
            line-height: 50px;
            width: 40vh;
        }
    </style>


<div>
    加载中....
</div>
<div>
    <button>change-url</button>
</div>
<script>
    (
        function () {
            var a=0;
            setInterval(function () {
                a++;
                document.getElementById("content").innerText=a;
            },1000)
        }
    )()
    window.addEventListener("hashchange",function (e) {
        var now=location.hash && location.hash.substring(1);
        switch (now){
            case "blue":
                document.getElementById("content").setAttribute("class","colorBlue");
                break;
            case "gray":
                document.getElementById("content").setAttribute("class","colorgray");
                break;
            case "green":
                document.getElementById("content").setAttribute("class","colorgreen");
                break;
        }

    },false);
    document.getElementsByClassName("btn")[0].addEventListener("click",function () {
        var now=location.hash && location.hash.substring(1);
        if(now=="blue"){
            location.hash="gray"
            document.getElementById("content").setAttribute("class","colorgray");
        }else if(now=="gray"){
            location.hash="green"
            document.getElementById("content").setAttribute("class","colorgreen");
        }else if(now=="green"){
            location.hash="blue"
            document.getElementById("content").setAttribute("class","colorBlue");
        }
    },false);
</script>

Ouvrez la page dans le navigateur et ajoutez #blue à l'itinéraire, comme suit :

Vous pouvez voir la page suivante. Dans les conditions initiales, l'affichage de la page se charge..., puis le timer déclenche une mise à jour et affiche le nombre croissant. cette fois, on peut L'history.length correspondant est imprimé dans la console, et sa valeur est 2 :

Ensuite, nous modifions la valeur de hachage en cliquant sur le bouton changer-url. Nous pouvons voir que le chemin correspondant a changé, #blue est devenu #g'ra, et la couleur de fond a également changé en conséquence. , mais il augmente en ce moment. Le nombre n'a pas été actualisé, ce qui indique que notre page n'a pas subi le processus d'actualisation et de rechargement.

Entrez à nouveau window.history.length sur la console pour voir, Sa valeur est passée à 3. Cliquez sur la flèche de retour du navigateur et l'arrière-plan de la page passe au fond bleu précédent. À ce stade, nous avons atteint la fonction souhaitée ;

history.pushStateEn plus des méthodes mentionnées ci-dessus, le même effet peut également être obtenu grâce au nouveau history.pushState en

history. pushState history.replaceState et history.replaceState sont de nouvelles API en HTML5. Les deux peuvent modifier l'URL de la barre d'état sans actualiser la page. Cependant, la différence entre les deux est que replaceState remplace l'adresse actuelle par l'URL spécifiée, tandis que pushState. en crée un nouveau. L'événement window.onpopstate sera déclenché après l'exécution de history.back() et history.forward().

API

history.pushState(state,title,url)

state : objet, qui peut stocker certaines données pour représenter l'état actuel. Lorsque le navigateur s'exécute en avant ou en arrière, l'événement onpopState sera déclenché. L'état sera l'objet d'attribut de l'objet événement et sera accessible via event.state. Il convient de noter que la valeur d'attribut dans statez ne peut pas être un objet. url est l'adresse à remplacer ; si c'est puhState, un enregistrement d'historique sera ajouté

Exemple

Nous pouvons également utiliser l'exemple ci-dessus pour tester, mais , nous devons surveiller l'événement popstate, créer un nouvel enregistrement d'historique et enregistrer les informations actuelles dans history.state

Résumé

. Les deux méthodes présentées ci-dessus, vous pouvez modifier l'URL et ajouter un nouvel enregistrement d'historique sans sauter de page. Vous pouvez effectuer des opérations avant et arrière via le texte par défaut du navigateur. Cependant, il convient de noter que les deux moniteurs déclenchent l'événement de réponse modifié. . Différent, et la manière de modifier l'url est également différente.

history.pushState && window.addEventListener("popstate",function(e){})
history.pushState && history.pushState（state,title,url）

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!