javascript window.history對象如何應用

今天小編給大家分享一下javascript window.history對象如何應用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。

注意： 沒有應用于History對象的公開標準，不過所有瀏覽器都支持該對象。

描述：頁面棧對象

說明：棧區特征為（后進先出），堆區特征為（先進先出）

內容：

• (1)window.history.back()        跳轉到棧中的上一個頁面

• (2)window.history.forward()    跳轉到棧中的下一個頁面

• (3)window.history.go(num)    跳轉到棧中的指定頁面

• (4)window.history.length        棧中頁面的數量

注意：

• a.通過window.history對象中提供的方法進行的頁面跳轉并不會向棧中添加新的頁面。

• 通過window.location.href或者通過a標簽進行的跳轉，則會向棧中添加新的頁面。

• b.棧區特征(后進先出)，不僅僅意味著后進來的內容先被移除棧，還意味著棧中的內容如果想要添加到指定位置，必須先將之前的內容退棧才行。

     <h3>第一頁</h3>
    <button class="next">去到第二頁</button>
    <hr/>
    <h4>window.history對象提供的方法</h4>
    <button class="back">window.history.back()</button>
    <button class="forward">window.history.forward()</button>
    <button class="go">window.history.go(2)</button>
    <button class="length">window.history.length</button>



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

        nextBut.onclick = function() {
            document.location.href = '11第2個頁面.html';
        }
        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>

當單擊“去到第二頁”按鈕時：

第二個頁面：

<h3>第二個頁面</h3>
<button  class="next">去到第三頁</button>
<hr/>
<h4>window.history對象提供的方法</h4>
<button  class="back">window.history.back()</button>
<button  class="forward">window.history.forward()</button>
<button  class="go">window.history.go(2)</button>
<button  class="length">window.history.length</button>

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

        nextBut.onclick = function() {
            document.location.href = '11第3個頁面.html';
        }
        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>

當單擊”去到第三頁“按鈕時：

當然，底下的幾個按鈕都可以點擊，感興趣的自己動手試試，然后進行嘗試！

第三個頁面：

<h3>第三個頁面</h3>
<button  class="next">去到第四頁</button>
<hr/>
<h4>window.history對象提供的方法</h4>
<button  class="back">window.history.back()</button>
<button  class="forward">window.history.forward()</button>
<button  class="go">window.history.go(2)</button>
<button  class="length">window.history.length</button>

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

        nextBut.onclick = function() {
            document.location.href = '11第4個頁面.html';
        }
        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>

效果圖如下：當單擊”去到第四頁“按鈕時：

第四個頁面：

     <h3>第四個頁面</h3>
    <button class="next">回到首頁</button>
    <hr/>
    <h4>window.history對象提供的方法</h4>
    <button class="back">window.history.back()</button>
    <button class="forward">window.history.forward()</button>
    <button class="go">window.history.go(2)</button>
    <button class="length">window.history.length</button>

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

        nextBut.onclick = function() {
            document.location.href = '11window.history對象.html';
        }
        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>

效果圖如下：當單擊”回到首頁“按鈕時：

以上就是“javascript window.history對象如何應用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。