💭

複数回戻るボタンを押さないと戻れないページの作成方法

2024/02/01に公開

HTML

JavaScript

Web

tech

経緯・概要

検索結果から、ヒットしたページを閲覧していたのですが、戻るボタンを1回押しても検索結果に戻ることができないページがありました。
このページでは、戻るボタンを2回押すことで検索結果に戻ることができますが、検索する上では不便に感じます。どうやってこのページを作っているのか気になったため、調べて自分でも作ってみました。

調べる

1.リダイレクト

リダイレクトとは、接続されたページから、別のページへ飛ばす処理のことです。最初はリダイレクトによって同じページを2回表示していることが原因だとおもったのですが、そうではなかったです。リダイレクトを使った場合は、ページを2回読み込む動作になると思いますが、読み込み回数は1回でした。

2.戻るボタンの制御

Javascriptで戻るボタンを押した時の動作を変更することができます。ユーザが戻るボタンを1回目に押した時は戻らないようにする記述を行えば、2回押した時に戻る処理にすることができると思ったのですが、実際には特に制御されていないようでした。

3.閲覧履歴の追加

Javascriptで閲覧履歴を追加することできます。ユーザが戻るボタンを1回目に押した時は、追加された履歴に戻らせることができます。件のサイトはこの方法で実装されており、以下の記述になっていました。

xxx.js

window.addEventListener('load', () => { # ページの読み込みが完了したら
  ...
  history.pushState(null, ''); # 今のページと同じ履歴を一つ追加する
  ...

作って動作確認

HTMLファイルを作成

history_add.html

<script>
  history.pushState(null, null);
</script>
<h1 style="text-align: center;">history_add.html</h1>

ブラウザで表示
戻るボタンを押す

戻るボタンを押しても同じページが表示されました。以上で確認まで終わりです。

参考

調べた方法

件のサイトには、HTMLに外部ファイルとして埋め込まれたjavascriptが複数ありました。HTMLとJavascriptをすべて検索したかったのですが、良い方法が分かりませんでした。webページを完全な状態で保存し、保存したJavascriptを含むフォルダをvscodeで開いて検索したのですが、もっといい方法があるかもしれません。