[jQuery] history.backを使わないで戻るボタンを実装する方法

今回の記事はjQueryを使ったちょっとしたネタです。Webアプリで戻るボタンを実装する場合、javascriptの「history.back()」関数を一つ前のページに戻ることができます。しかし、場合によってはこの「history.back()」を使いたくない場面があります。その場合にjQueryとHTML5のデータ属性を使い、戻るボタンを実装する方法を記します。

まずは、jsファイルを作成し、戻るボタンがクリックされた場合に以下のような処理実装させます。

$(function() {
  // 戻るボタンがクリックされた場合に呼ばれる関数です。
  // data-href属性が設定されている場合、その値が示すページに移動します。
  $("button.backbutton[type='button']").click(function() {
    href = $(this).attr("data-href");
    if (typeof href !== "undefined" && href !== false) {
      location.href = $(this).attr("data-href");
    }
  });
})

あとはhtmlファイルでこのjsファイル(+jQuery本体)を読み込み、ボタン(type="button")のクラスに「backbutton」を追加し、「data-href」に戻り先のファイルを指定するだけです。

<!-- この場合、同じ階層の「list.html」に戻ることになります。 -->
<button type="button" class="backbutton" data-href="./list.html">戻る</button>

例えば上の例だと、戻るボタンをクリックすると、同一階層の「list.html」に遷移するようになります。

今回のサンプルをzipで固めたものへのリンクはこちらです。

中身

  • form.html: 戻るボタンがあるhtmlファイル
  • list.html: 戻るボタンを押した場合の遷移先
  • common.js: 戻るボタンを押した場合に呼ばれる関数
  • common.css: ボタンの装飾など

この記事が役に立った場合、シェアしていただけると励みになります!!