web-dev-qa-db-ja.com

Webブラウザの[戻る]ボタンはどのように機能しますか？

この質問についてWebで検索しましたが、何も見つかりませんでした。

戻るボタンのロジックは何ですか？ Webブラウザで戻るボタンを押すとどうなりますか？

私は本当にそれについてもっと理解したいと思います。

ありがとうございました。

browserback-button
79
Pierre Thibault

Webブラウザは、そのウィンドウでアクセスしたWebページのスタック（または、必要に応じてリスト）を保持します。ホームページがgoogle.comであり、そこから他のいくつかのウェブサイトにアクセスするとします：youtube.com、yahoo.com、cnn.com。最後のものにアクセスすると、リストは次のようになります。

google.com -> youtube.com -> yahoo.com -> cnn.com
                                            ^
                                            |
                                       current page

[戻る]ボタンを押すと、ブラウザは次のようにリストの前のページに戻ります。

google.com -> youtube.com -> yahoo.com -> cnn.com
                                ^
                                |
                           current page

この時点で、もう一度Backを押してyoutube.comに移動するか、Forwardを押してcnn.comに移動します。もう一度Backを押したとしましょう：

google.com -> youtube.com -> yahoo.com -> cnn.com
                   ^
                   |
              current page

たとえば、abc.comにアクセスすると、リストは次のように変わります。

google.com -> youtube.com -> abc.com
                               ^
                               |
                          current page

Yahoo.comとcnn.comの両方がリストから削除されていることに注意してください。これは、新しいルートを選択したためです。ブラウザは、あなたが今いる場所にたどり着くためにあなたが訪れたページのリストのみを維持し、あなたが今まで行ったすべてのページの履歴ではありません。また、ブラウザーはアクセスしているサイトの構造について何も知らないため、驚くべき動作を引き起こす可能性があります。

閲覧する製品のカテゴリとサブカテゴリがあるショッピングサイト（短い例としてne.com）を使用しています。サイト設計者は、ウィンドウの上部付近に breadcrumbs を用意して、カテゴリをナビゲートできるようにしました。サイトのトップページから開始し、[ハードウェア]、[メモリ]の順にクリックします。リストは次のようになります。

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem
                                           ^
                                           |
                                      current page

ハードウェアカテゴリに戻りたいので、戻るボタンを使用する代わりに、ブレッドクラムを使用して親カテゴリに移動します。ブラウザのリストは次のようになります。

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                                          ^
                                                          |
                                                     current page

サイト構造によると、あなたは後方に（レベルを上げて）行きましたが、リンクをクリックしたためにブラウザに進みました。リンクをクリックするか、アドレスバーにURLを入力するたびに、そのリンクが既にアクセスしたページに移動するかどうかに関係なく、ブラウザに関する限り先に進みます。

最後に、メインサイトページ（ne.com）に戻ります。パンくずリストを使用することもできますが、今回は[戻る]ボタンをクリックします-1レベル上に移動する必要があることは明らかです。しかし、それはあなたをどこに連れて行きますか？

最初は多くのユーザーを混乱させます（私がこれを正確に行うと、自分も含まれます）。レベルを下げて、メモリカテゴリに戻ります。ページのリストを見ると、その理由は簡単にわかります。

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                            ^
                                            |
                                       current page

[戻る]ボタンのみを使用してメインページに戻るには、さらに2回押す必要があり、ハードウェアカテゴリに戻り、最後にメインページに戻ります。私たちプログラマーにとっては何が起こっているのかとても明白に思えますが、ブラウザーが自分のウェブサイトの階層構造について何も知らないことに気付いていないため、通常のユーザーがいつも驚いています。

ブラウザがサイトデザイナーに「戻る」ボタンをプログラムさせて、今何をするのではなく、明白なことをする（レベルを上げる）のは素晴らしいことでしょうか？

編集：コメンターは、ブラウザーがページをリロードするか、単にローカルキャッシュからページを表示するかを尋ねました。

答えはそれによって異なります。サイト設計者は、ブラウザがページをキャッシュするかどうかを指定できます。キャッシュされていないページとして設定されているページの場合、[戻る]を押すと、ブラウザは初めてアクセスしたときのように、サーバーからページをリロードします。キャッシュされたページの場合、ブラウザはキャッシュからそれを表示します。これははるかに高速です。

94
Barry Brown

私はそれを私の最後のリクエストを再発行することと考えたいです。単純なGETを実行すると、おそらく前回と同じ結果が返されます（マイナスの動的コンテンツ）。 POSTを行った場合、フォームを（確認後に）サーバーに再送信します。

5
John Hoven

基本的な考え方は、最後のページまたは論理的なサイト部門に戻ることです。

Gmailを見ると、検索を実行してメッセージをクリックし、[戻る]ボタンを押すと、実行した検索に戻ります。

ほとんどのブラウザでクリックすると、最後のhttpリクエストが再送信されるか、ブラウザがサイトをキャッシュする場合にキャッシュがロードされます。

2
BobBrez

これを説明する最も簡単な方法は擬似コードだと思います：

class Page:
    String url, ...
    Page previous, next # implements a doubly-linked list

class History:
    Page current # current page

    void back():
        if current.previous == null:
            return
        current = current.previous
        refresh()

    void forward():
        if current.next == null:
            return
        current = current.next
        refresh()

    void loadPage(Page newPage):
        newPage.previous = current
        current.next = newPage # remove all the future pages
        current = current.next
        display(current)
2
Imagist

表示されたページの履歴は、スタックのような形式で保持されます。上位3ページ（たとえば、A、B、C）を「ポップ」してから別のページDに移動すると、前方に押してBに戻ることはできません。

1
kajaco

開発者として、ブラウザが[戻る]ボタンをどのように処理しても、webappが機能することを確認する必要があります:-)要求を再送信しますか？新しいリクエストは古いリクエストと同一ですか、それとも何らかの違いがありますか？ブラウザはユーザーに再POSTの確認を求めますか？ページのどの要素が再要求され、キャッシュから何がロードされますか？ブラウザはキャッシュ制御ヘッダーを尊重しますか？

これらの質問に対する答えは、メーカー、ブラウザのバージョン、ユーザー設定によって異なります。これらすべてがそれほど重要ではないようにソフトウェアを設計してください。

あまり直接的な回答ではなく申し訳ありませんが、ここには既にいくつかの正解があります。

0
Ilya Birman

ブラウザは記憶のために常にページを保存し、戻るボタンを押しても前のページのリクエストをサーバーに送信せず、代わりにページを保存したキャッシュを表示し、LIFOルールは、最後に開いた戻るボタンを押すと最初にそのページを表示する理由です

0
Dileep kumar