Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Verlaufsmodus in HTML5

Detaillierte Erläuterung des Verlaufsmodus in HTML5

黄舟Original: 2017-07-18 13:51:332349Durchsuche

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 erste Drei Parameter, die die Adresse des neuen historischen Datensatzes angeben. Der Browser lädt diese URL nicht, nachdem die pushState()-Methode aufgerufen wurde. Die neue URL muss keine absolute Adresse sein, sie muss relativ sein zur aktuellen URL

2. History.replaceState

history.replaceState(state, title, url);

window.history.replaceState und window.history .pushState ist ähnlich, der Unterschied besteht darin, dass replaceState keinen neuen historischen Aufzeichnungspunkt in window.history hinzufügt. Die Wirkung ähnelt window.location.replace(url), wodurch kein neuer Aufzeichnungspunkt in den historischen Aufzeichnungspunkt eingefügt wird . .

3. window.onpopstate

zur Überwachung von URL-Änderungen

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

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

Javascript-Skript-Ausführungsfenster. History.pushState und window.history.replaceState lösen das Ereignis onpopstate nicht aus. Wenn Sie im Browser vorwärts oder rückwärts klicken, sind die Reaktionen von Google Chrome und Firefox unterschiedlich, wenn die Seite zum ersten Mal geöffnet wird Chrome löst das onpopstate-Ereignis aus, Firefox jedoch nicht

4. Nachfolgend finden Sie ein Beispiel für einen HTML5-Modus ähnlich dem Vue-Router, der lediglich der Vertiefung des Verständnisses dient und sehr grob geschrieben ist.

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

Übrigens werde ich einen Servercode in node.js posten, ich habe einfach einen

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)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Verlaufsmodus in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der Canvas-Probleme in HTML5Nächster Artikel：Zusammenfassung der Canvas-Probleme in HTML5

In Verbindung stehende Artikel

Mehr sehen