總結歸納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.棧區特徵(後進先出)，不僅僅意味著後進來的內容先被移除棧，還意味著棧中的內容如果想要新增到指定位置，必須先將之前的內容退棧才行。

     <h2>第一頁</h2>
    <button class="next">去到第二頁</button>
    <hr/>
    <h3>window.history物件提供的方法</h3>
    <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>

當單擊「去到第二頁」按鈕時：

第二個頁面：

<h2>第二個頁面</h2>
<button  class="next">去到第三頁</button>
<hr/>
<h3>window.history物件提供的方法</h3>
<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>

當單擊」去到第三頁「按鈕時：

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

第三個頁面：

<h2>第三個頁面</h2>
<button  class="next">去到第四頁</button>
<hr/>
<h3>window.history物件提供的方法</h3>
<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>

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

第四個頁面：

     <h2>第四個頁面</h2>
    <button class="next">回到首頁</button>
    <hr/>
    <h3>window.history物件提供的方法</h3>
    <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>

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

【相關推薦：、】

以上就是總結歸納window.history物件的應用的詳細內容，更多請關注TW511.COM其它相關文章！