Detaillierte Erläuterung der Verwendung des History-Modus in H5
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(){}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
Firefoxauf 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)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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
