JavaScriptでの戻るボタンの操作方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでの戻るボタンの操作方法について現役エンジニアが解説しています。閲覧履歴の前後にページを移動するには、historyオブジェクトのbackメソッド、forwardメソッドを使います。また、ページ遷移に対してpopstateイベントでイベント設定を行うことも出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでの戻るボタンの操作方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでの戻るボタンの操作方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

historyオブジェクトの使い方

historyオブジェクトはwindowオブジェクトのプロパティに位置します。

キャッシュが有効な状態のページかつ閲覧履歴が存在している場合に、現在アクティブになっているウィンドウで閲覧したURLを取得できます。

閲覧履歴を戻る・進むなどを行えます。

 

JavaScriptでの戻るボタンを設定する

historyオブジェクトのbackメソッドで閲覧履歴の一つ前に戻ることが出来ます。(閲覧履歴がある場合のみ)

JavaScriptで戻るボタンを設定するためには、上記のbackメソッドをonclickイベントに指定します。

 

<p><a href="#" onClick="history.back(); return false;">前のページにもどる</a></p>

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptでの進むボタンを設定する

historyオブジェクトのforwardメソッドで閲覧履歴の一つ先に進むことが出来ます。(history.backなどでページを戻った場合のみ)

JavaScriptで進むボタンを設定するためには、上記のforwardメソッドをonclickイベントに指定します。

 

戻るボタンが押されたときにイベントを発動させる方法

JavaScriptで設定した戻るイベントを検知するためにpopstateを監視する必要があります。

 

window.addEventListener("popstate", function() {

// 検知したあとの処理(確認メッセージなど)

}

 

※popstateはページの遷移を検知するため、「ページを進む」場合にも検知してしまいます。

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。