Beispiel-Tutorial des h5History-Modus

Ich habe kürzlich die Implementierung des HTML5-Verlaufsmodus im Vue-Router gesehen und dann den HTML5-Verlauf studiert. Hier sind einige meiner Erkenntnisse. Ich habe übrigens JQuery verwendet, um eine Implementierung ähnlich dem HTML5-Verlauf zu schreiben Mode-Router im Vue-Router, um den Zweck des Übens und Kennenlernens zu erreichen.

1. History.pushState

history.pushState(state, title, url);

Der erste und zweite Parameter oben können leer sein, hauptsächlich der dritte Parameter, der die Adresse des neuen historischen Datensatzes Nach dem Aufruf der pushState()-Methode lädt der Browser nicht die URL. Die neue URL muss nicht die absolute sein Adresse. Wenn sie relativ zu ist, muss sie relativ zur aktuellen URL

2. History.replaceState

history.replaceState(state, title, url);

ähnelt

, der Unterschied besteht darin, dass window.history.replaceState window.history.pushState keinen replaceState Verlauf in Das Aufzeichnen von -Punkten hat den gleichen Effekt wie window.history, fügt jedoch keinen neuen Aufzeichnungspunkt zu den historischen Aufzeichnungspunkten hinzu. window.location.replace(url)3.

window.onpopstate um URL-Änderungen zu überwachen

Javascript

Skriptausführung

window.addEventListener("popstate",  currentState =

und

lösen das -Ereignis nicht aus. Wenn Sie im window.history.pushStateBrowserwindow.history.replaceState vorwärts oder rückwärts klicken, wird ausgelöst Google Chrome und Firefox reagieren seltsamerweise unterschiedlich, wenn die Seite zum ersten Mal geöffnet wird, während Firefox dies nicht tut. 4. Veröffentlichen Sie unten ein Beispiel für HTML5-Muster, die dem Vue-Router ähneln dienen lediglich der Vertiefung des Verständnisses und sind sehr grob geschrieben. onpopstate

Übrigens poste ich einen Servercode in node.js. Zum Testen habe ich einfach einen geschrieben onpopstate

76c82f278ac045591c9159d381de2c579fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30ea80eb7cbb6fff8b0ff70bae37074b813b2386ffb911b14667cb8f0f91ea547a7HTML5 History 模式(第二版)6e916e0f7d1e588d4f442bf645aedb2f0e2747f14b81cd86c404d16c6ead21a346d5fe1c7617e3914f214aaf043f4ccf.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;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86db0059ac5cf5908bb26cca21bb12cfd28051ed3719fd88644fafce0a58161256625edfb22a4f469ecb59f1190150159c61bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c62bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c63bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689b3b8810c81dca5c67dae79332813eebf929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba684fd2989e8d240aee500d7f8197e051e42cacc6d41bbb37262a98f745aa00fbf08019067d09615e43c7904885b5246f0a
    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;//获取完整URLvar 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 += '25edfb22a4f469ecb59f1190150159c6'+data2.data[i].name+'bed06894275b65c1ab86501b08a632eb'}
                    $('.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 += '25edfb22a4f469ecb59f1190150159c6'+data2.data[i].name+'bed06894275b65c1ab86501b08a632eb'}
                    $('.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()
};2cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

Der Server hat data0.json, data1.json und data2.json platziert, um das Abrufen von Daten aus der Datenbank zu simulieren. Der Server hat den vom Frontend gesendeten Indexwert (0/1/2) passend die gelesenen Daten*.json-Datei und senden Sie sie dann an das Frontend

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial des h5History-Modus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!