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

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

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

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

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

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

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

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

以上がwindow.history オブジェクトのアプリケーションの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。