Beispiel-Tutorial des h5History-Modus-H5-Tutorial-php.cn

Beispiel-Tutorial des h5History-Modus

零下一度

Freigeben： 2017-06-23 11:10:27

Original

2143 Leute haben es durchsucht

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);

Nach dem Login kopieren

Der erste und zweite Parameter oben können leer sein, hauptsächlich der dritte Parameter, der <🎜 anzeigt >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< sein 🎜>

history.replaceState(state, title, url);

Nach dem Login kopieren

ähnelt

, der Unterschied besteht darin, dass window.history.replaceState window.history.pushState keinen replaceState Verlauf in <🎜 hinzufügt > 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 =

Nach dem Login kopieren

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML5 History 模式(第二版)</title><link rel="stylesheet" type="text/css" href="css/style.css?1.1.10"><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><div class="container-bg"><ul class="pagination"><li>1</li><li>2</li><li>3</li></ul><ul class="ptting"></ul></div><script type="text/javascript" src="js/jquery-3.2.1.min.js?1.1.10"></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;//获取完整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 += &#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>

Nach dem Login kopieren

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!