Fassen Sie die Anwendung des window.history-Objekts zusammen

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich Probleme im Zusammenhang mit dem window.history-Objekt vorstellt. Das History-Objekt enthält die vom Benutzer besuchten URLs (im Browserfenster). hoffe es hilft allen.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Das History-Objekt enthält die vom Benutzer besuchten URLs (im Browserfenster).

Das History-Objekt ist Teil des Fensterobjekts und kann über die Eigenschaft window.history aufgerufen werden.

Hinweis: Es gibt keinen öffentlichen Standard für das History-Objekt, es wird jedoch von allen Browsern unterstützt.

Beschreibung: Seitenstapelobjekt

Beschreibung: Die Eigenschaften des Stapelbereichs sind (zuletzt rein, zuerst raus) und die Eigenschaften des Heap-Bereichs sind (zuerst rein, zuerst raus)

Inhalt:

• (1)window.history back() Zur vorherigen Seite im Stapel springen
• (2)window.history.forward() Zur nächsten Seite im Stapel springen
• (3)window.history .go(num) Zum Stapel springen Die angegebene Seite in
• (4)window.history.length Die Anzahl der Seiten im Stapel

Hinweis:

• a Die Seite springt durch die im Das window.history-Objekt wird nicht in den Stapel verschoben. Neue Seite hinzufügen in .
• Das Springen durch window.location.href oder ein Tag fügt dem Stapel eine neue Seite hinzu.
• b. Die Stapelbereichsfunktion (Last In, First Out) bedeutet nicht nur, dass der zuletzt eingehende Inhalt zuerst vom Stapel entfernt wird, sondern auch, dass der Inhalt im Stapel an der angegebenen Stelle hinzugefügt werden soll , der vorherige Inhalt muss zuerst entstapelt werden.

     <h2>第一页</h2>
    <button>去到第二页</button>
    <hr>
    <h3>window.history对象提供的方法</h3>
    <button>window.history.back()</button>
    <button>window.history.forward()</button>
    <button>window.history.go(2)</button>
    <button>window.history.length</button>



<script>
        var nextBut = document.querySelector(&#39;.next&#39;);
        var backBut = document.querySelector(&#39;.back&#39;);
        var forwardBut = document.querySelector(&#39;.forward&#39;);
        var goBut = document.querySelector(&#39;.go&#39;);
        var lengthBut = document.querySelector(&#39;.length&#39;);

        nextBut.onclick = function() {
            document.location.href = &#39;11第2个页面.html&#39;;
        }
        backBut.onclick = function() {
            window.history.back()
        }
        forwardBut.onclick = function() {
            window.history.forward()
        }
        goBut.onclick = function() {
            window.history.go(2)
        }
        lengthBut.onclick = function() {
            console.log(window.history.length)
        }
</script>

Wenn auf die Schaltfläche „Zur zweiten Seite gehen“ geklickt wird:

Die zweite Seite:

<h2>第二个页面</h2>
<button>去到第三页</button>
<hr>
<h3>window.history对象提供的方法</h3>
<button>window.history.back()</button>
<button>window.history.forward()</button>
<button>window.history.go(2)</button>
<button>window.history.length</button>

 <script>
        var nextBut = document.querySelector(&#39;.next&#39;);
        var backBut = document.querySelector(&#39;.back&#39;);
        var forwardBut = document.querySelector(&#39;.forward&#39;);
        var goBut = document.querySelector(&#39;.go&#39;);
        var lengthBut = document.querySelector(&#39;.length&#39;);

        nextBut.onclick = function() {
            document.location.href = &#39;11第3个页面.html&#39;;
        }
        backBut.onclick = function() {
            window.history.back()
        }
        forwardBut.onclick = function() {
            window.history.forward()
        }
        goBut.onclick = function() {
            window.history.go(2)
        }
        lengthBut.onclick = function() {
            console.log(window.history.length)
        }
</script>

Wenn auf die Schaltfläche „Zur dritten Seite gehen“ geklickt wird:

Natürlich können Sie auf die Schaltflächen unten klicken. Wenn Sie Interesse haben, probieren Sie es selbst aus!

Die dritte Seite:

<h2>第三个页面</h2>
<button>去到第四页</button>
<hr>
<h3>window.history对象提供的方法</h3>
<button>window.history.back()</button>
<button>window.history.forward()</button>
<button>window.history.go(2)</button>
<button>window.history.length</button>

 <script>
        var nextBut = document.querySelector(&#39;.next&#39;);
        var backBut = document.querySelector(&#39;.back&#39;);
        var forwardBut = document.querySelector(&#39;.forward&#39;);
        var goBut = document.querySelector(&#39;.go&#39;);
        var lengthBut = document.querySelector(&#39;.length&#39;);

        nextBut.onclick = function() {
            document.location.href = &#39;11第4个页面.html&#39;;
        }
        backBut.onclick = function() {
            window.history.back()
        }
        forwardBut.onclick = function() {
            window.history.forward()
        }
        goBut.onclick = function() {
            window.history.go(2)
        }
        lengthBut.onclick = function() {
            console.log(window.history.length)
        }
</script>

Die Darstellung ist wie folgt: Wenn Sie auf die Schaltfläche „Zur vierten Seite gehen“ klicken:

Die vierte Seite:

     <h2>第四个页面</h2>
    <button>回到首页</button>
    <hr>
    <h3>window.history对象提供的方法</h3>
    <button>window.history.back()</button>
    <button>window.history.forward()</button>
    <button>window.history.go(2)</button>
    <button>window.history.length</button>

<script>
        var nextBut = document.querySelector(&#39;.next&#39;);
        var backBut = document.querySelector(&#39;.back&#39;);
        var forwardBut = document.querySelector(&#39;.forward&#39;);
        var goBut = document.querySelector(&#39;.go&#39;);
        var lengthBut = document.querySelector(&#39;.length&#39;);

        nextBut.onclick = function() {
            document.location.href = &#39;11window.history对象.html&#39;;
        }
        backBut.onclick = function() {
            window.history.back()
        }
        forwardBut.onclick = function() {
            window.history.forward()
        }
        goBut.onclick = function() {
            window.history.go(2)
        }
        lengthBut.onclick = function() {
            console.log(window.history.length)
        }
</script>

Die Darstellung ist wie folgt: Wenn Sie auf „ Schaltfläche „Zurück“ „Startseite“:

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Das obige ist der detaillierte Inhalt vonFassen Sie die Anwendung des window.history-Objekts zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!