suchen

Heim >Web-Frontend >H5-Tutorial >Detaillierte Erläuterung der Verwendung des History-Modus in H5

Detaillierte Erläuterung der Verwendung des History-Modus in H5

php中世界最好的语言
php中世界最好的语言Original
2018-03-26 16:47:193433Durchsuche

Dieses Mal werde ich Ihnen die Verwendung des Verlaufsmodus in H5 ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Verlaufsmodus in H5?

Ich habe kürzlich die Implementierung des HTML5-Verlaufsmodus-Routings im Vue-Router gesehen und dann die Geschichte von HTML5 studiert. Übrigens habe ich JQuery verwendet, um eine Implementierung zu schreiben Ähnlich wie HTML5 im Vue-Router-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 angibt des neuen historischen Datensatzes. Der Browser lädt diese URL nicht, nachdem die pushState()-Methode aufgerufen wurde. Wenn sie relativ ist, muss sie relativ zur aktuellen URL sein 🎜>

2.history.replaceState

window.history.replaceState ähnelt window.history.pushState, der Unterschied besteht darin, dass replaceState nicht vorhanden ist in Die Wirkung des Hinzufügens eines neuen historischen Aufzeichnungspunkts in window.history ähnelt der von window.location.replace(url), wodurch kein neuer Aufzeichnungspunkt zum historischen Aufzeichnungspunkt hinzugefügt wird. 
history.replaceState(state, title, url);

3. window.onpopstate zur Überwachung von URL-Änderungen

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

Das Die Skriptausführung von window.history.pushState und window.history.replaceState löst das onpopstate-Ereignis nicht aus. Wenn Sie im Browser vorwärts oder rückwärts klicken, werden Google Chrome und

Firefox

auf der Seite ausgelöst. Die Reaktion nach dem Öffnen ist seltsamerweise anders. Google Chrome löst das Ereignis onpopstate aus, Firefox jedoch nicht. Die Musterbeispiele dienen lediglich der Vertiefung des Verständnisses und sind sehr grob geschrieben.

Übrigens werde ich einen Servercode in node.js posten. Zum Testen habe ich einfach einen Hinweis: Verlauf geschrieben. pushState ({pageIndex : 1}, "", "http://127.0.0.1:3000/lmw/"+query) Der dritte Parameter schreibt hier den vollständigen absoluten Pfad, wenn er als "/lmw/"+query geschrieben wird , Der relative Pfad wird nach der URL angehängt, wenn der Abfragewert zunimmt, da der relative Pfad relativ zur aktuellen URL sein muss

Der Server fügt data0.json, data1.json und data2.json ein, um den Datenbankabruf zu simulieren data. Der Server erhält vom Front-End den Indexwert (0/1/2), der mit der gelesenen data*.json-Datei übereinstimmt, und sendet ihn dann an das Front-End 
<!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>

Ich glaube Ihnen Ich habe die Methode gemeistert, nachdem ich den Fall in diesem Artikel gelesen habe. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website! 

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)
Empfohlene Lektüre:


Asynchroner Upload der H5-Datei

Dynamischer Abgleich von Datenlisten-Eingabefeld und Hintergrunddatenbankdaten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des History-Modus in H5. 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：Häufig verwendete HTML5-Listen-TagsNächster Artikel：Häufig verwendete HTML5-Listen-Tags

In Verbindung stehende Artikel

Mehr sehen