window.history オブジェクトのアプリケーションの概要-jsチュートリアル-php.cn

window.history オブジェクトのアプリケーションの概要

WBOY

リリース： 2022-08-05 11:26:26

転載

1517 人が閲覧しました

この記事では、javascript に関する関連知識を提供します。主に window.history オブジェクトに関連する問題を紹介します。History オブジェクトには、ユーザーが (ブラウザウィンドウ内で) アクセスした URL が含まれています。見てください、皆さんのお役に立てれば幸いです。

window.history オブジェクトのアプリケーションの概要

[関連する推奨事項: JavaScript ビデオチュートリアル、Web フロントエンド ]

History オブジェクトには次のものが含まれますユーザーが (ブラウザウィンドウで) URL にアクセスしました。

History オブジェクトは window オブジェクトの一部であり、window.history プロパティを通じてアクセスできます。

注: History オブジェクトには公的標準はありませんが、すべてのブラウザがこれをサポートしています。

window.history オブジェクトのアプリケーションの概要

説明: ページスタックオブジェクト

説明: スタック領域の特性は (後入れ先出し)、およびヒープ領域は (先入れ先出し) です。

Content:

(1)window.history.back() 前のページにジャンプします。スタック
(2 )window.history.forward() スタック内の次のページにジャンプします
(3)window.history.go(num) スタック内の指定されたページにジャンプしますstack
(4 )window.history.length スタック内のページ数

注:

a。 window.history オブジェクトで提供されるメソッドによるページジャンプでは、スタックに新しいページは追加されません。
window.location.href またはタグをジャンプすると、スタックに新しいページが追加されます。
b. スタック領域機能 (後入れ先出し) は、最後に入ったコンテンツが最初にスタックから削除されることを意味するだけでなく、スタックにコンテンツを追加したい場合に、指定された場所に移動するには、まずコンテンツのスタックを解除する必要があります。

     <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>

ログイン後にコピー

[2 ページ目に移動] ボタンをクリックすると:

2 ページ目:

<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>

ログイン後にコピー

「3 ページ目に進む」ボタンをクリックする場合:

もちろん、以下のボタンをクリックしても問題ありません。興味のある方はぜひ実際に試してみてください！

3 ページ目:

<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>

ログイン後にコピー

レンダリングは次のようになります。「4 ページに移動」ボタンをクリックした場合:

4 ページ目:

     <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>

ログイン後にコピー

レンダリングは次のとおりです。「ホームページに戻る」ボタンをクリックした場合: