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);
Nach dem Login kopieren
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);
Nach dem Login kopieren
3. window.onpopstate zur Überwachung von URL-Änderungen
window.addEventListener("popstate", function() {
var currentState = history.state;
/*
* 触发事件后要执行的程序
*/
});
//或者
window.onpopstate = function(){}Nach dem Login kopieren
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>Nach dem Login kopieren
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)Nach dem Login kopieren
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!
