Artikelverzeichnis
Diese Woche erinnerte ich mich plötzlich an den Wissenspunkt, Parameter nach dem URL-Pfad hinzuzufügen, ohne die Seite zu aktualisieren. Mir schien es vorher nicht aufgefallen zu sein. Ich wollte plötzlich einen Blick darauf werfen, also schaute ich beim Anschauen auf das Verlaufsobjekt.
Das History-Objekt bietet Zugriff auf den Sitzungsverlauf des Browsers, ermöglicht Vorwärts- und Rücksprünge im Browserverlauf des Benutzers und stellt gleichzeitig – beginnend mit HTML5 – Operationen für den Inhalt des Verlaufsstapels bereit.
1.window.history.back()
window.history.back()
Springen Sie im Verlauf zurück, was den gleichen Effekt hat, als würde der Benutzer auf die Zurück-Schaltfläche des Browsers klicken
2.window.history.forward()
window.history.forward()
Springen Sie im Verlauf vorwärts und der Benutzer klickt auf die Vorwärtsschaltfläche des Browsers
3.window.history.go() Springe zum angegebenen Punkt im Verlauf
Markieren Sie die relative Position der aktuellen Seite (das Flag für die relative Position der aktuellen Seite ist 0).
window.history.go(-1) //向前移动了一个页面，相当于window.history.back()
window.history.go(1) //向前移动了一个页面，相当于window.history.forward()
Sie können also einen Parameter von 2 übergeben und 2 Seiten vorwärts gehen. (Sie können window.history.lengthdie Anzahl der Seiten im Verlaufsstapel nach anzeigen
4. Fügen Sie die Nummer im Verlauf hinzu und ändern Sie sie
history.pushState()In HTML5 werden die Methoden und eingeführt history.replaceState(), mit denen Verlaufseinträge hinzugefügt bzw. geändert werden können
4.1 pushState()
Die aktuelle Seite war ursprünglich http://127.0.0.1:5500/test.html
history.pushState({
page: 1 }, 'title 1', '?page=1')
Nach dem Vorgang wird es zu http://127.0.0.1:5500/test.html?page=1
Nach diesem Vorgang wird der Browserverlauf hinzugefügt. Seiten können zurückgesetzt werden.
4.2 replaceState()
Dieser Vorgang ist derselbe wie oben, der Browserverlauf wird nach dem Vorgang nicht hinzugefügt und die Seite kann nicht zurückgesetzt werden.
5. Implementieren Sie js, um URL-Parameter zu ändern, ohne die Seite zu aktualisieren oder neu zu laden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#change {
width: 20px;
height: 20px;
background-color: aquamarine;
}
#change2 {
width: 20px;
height: 20px;
background-color: rgb(146, 127, 255);
}
#change1 {
width: 20px;
height: 20px;
background-color: rgb(255, 255, 127);
}
</style>
<body>
<div id="change" onclick="updateUrl('number','2') "></div>
<div id="change2" onclick="updateUrl('number1','2') "></div>
<div id="change1" onclick="updateUrl('number1','3') "></div>
</body>
<script type="text/javascript">
function updateUrl(key, value) {
var newurl = updateNewUrl(key, value)
//向当前url添加参数，有历史记录
window.history.pushState({
path: newurl
}, '', newurl);
// 向当前url添加参数，没有历史记录
// window.history.replaceState()({
// path: newurl
// }, '', newurl);
}
function updateNewUrl(key, value) {
var uri = window.location.href
if (!value) {
return uri;
}
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
</script>
</html>