Ajaxページで[前へ][次へ]ボタンの制御ができるようにする - PushState PopState の利用例 - JavaScript

Ajaxページで[前へ][次へ]ボタンの制御ができるようにするコードを紹介します。PushState PopState のページでの利用例となります。

概要

PopStateの動作をこちらの記事で紹介しました。また、PushStateの動作をこちらの記事で紹介しました。この記事では、PushState PopState を利用してAjaxページで、[前へ][次へ]ボタンの制御ができるコードを紹介します。

ページ制御のできない例

最初にPushStateやPopStateを使わずに、[前へ][次へ]ボタンの制御ができないページを作成してみます。

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    var pageid = 0;

    window.onload = function () {
      SetDisplay();
    }

    function NextClick() {
      pageid++;
      SetDisplay();
    }

    function SetDisplay() {
      switch (pageid) {
        case 0:
          target = document.getElementById("title");
          target.innerHTML = "Step 1";
          target = document.getElementById("text");
          target.innerHTML = "ステップ１の説明です。";
           
          target = document.getElementById("NextLink");
          target.style.display = "block";
          break;
        case 1:
          target = document.getElementById("title");
          target.innerHTML = "Step 2";
          target = document.getElementById("text");
          target.innerHTML = "ステップ２の説明です。";

          target = document.getElementById("NextLink");
          target.style.display = "block";
          break;
        case 2:
          target = document.getElementById("title");
          target.innerHTML = "Step 3";
          target = document.getElementById("text");
          target.innerHTML = "ステップ３の説明です。";

          target = document.getElementById("NextLink");
          target.style.display = "block";
          break;
        case 3:
          target = document.getElementById("title");
          target.innerHTML = "Step 4";
          target = document.getElementById("text");
          target.innerHTML = "ステップ４の説明です。";

          target = document.getElementById("NextLink");
          target.style.display = "block";
          break;
        case 4:
          target = document.getElementById("title");
          target.innerHTML = "Step 5";
          target = document.getElementById("text");
          target.innerHTML = "ステップ５の説明です。";

          target = document.getElementById("NextLink");
          target.style.display = "none";
          break;

      }
    }
  </script>
</head>

<body>
      <div id="title"></div>
      <div id="text"></div>
      <div id="NextLink"><a href="javascript:void(0);" onclick="NextClick();">次へ</a></div>
</body>
</html>

解説

ページを表示すると、pageidが0に初期化された状態となり、SetDisplay() 関数を呼び出します。

  var pageid = 0;

  window.onload = function () {
    SetDisplay();
  }

SetDisplay() 関数では、pageid の値に応じてページの内容を表示します。pageidの値が0の場合は、"ステップ１の説明です。"の文言が表示されます。

また、ページ下部の[次へ]リンクがクリックされた際には、NextClick() 関数を呼び出します。NextClick 関数では、pageidの値を1インクリメントし、SetDisplay関数を呼び出します。pageidが0の場合は pageidが1になり、SetDisplay関数により、ページの表示が、、"ステップ２の説明です。"に切り替わります。同様の処理を繰り返すことで、Step5まで表示を切り替えられる動作にしています。Step5に切り替わった際には、[次へ]のリンクを非表示にして、さらに先には進めないようにしています。

実行結果

Webブラウザでページを表示します。下図の画面が表示されます。[次へ]リンクをクリックします。

画面の表示が"Step2"の表示に変わります。戻るボタンは有効にならないため、前の画面には戻れません。

画面の下部の[次へ]リンクをクリックします。画面の表示が"Step3"に変わります。

同様に[次へ]リンクをクリックすると、"Step4","Step5"に表示が変わります。

PushState PopStateを利用してページ制御を実装する例

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    var pageid = 0;

    window.onload = function () {
      SetDisplay(true);
    }

    function NextClick() {
      pageid++;
      SetDisplay(true);
    }

    function SetDisplay(history_flag) {
      switch (pageid) {
        case 0:
          target = document.getElementById("title");
          target.innerHTML = "Step 1";
          target = document.getElementById("text");
          target.innerHTML = "ステップ１の説明です。";

          target = document.getElementById("NextLink");
          target.style.display = "block";
          break;
        case 1:
          target = document.getElementById("title");
          target.innerHTML = "Step 2";
          target = document.getElementById("text");
          target.innerHTML = "ステップ２の説明です。";

          if (history_flag == true) {
            history.pushState("STEP2", null, "/step2.html");
          }

          target = document.getElementById("NextLink");
          target.style.display = "block";break;
        case 2:
          target = document.getElementById("title");
          target.innerHTML = "Step 3";
          target = document.getElementById("text");
          target.innerHTML = "ステップ３の説明です。";

          if (history_flag == true) {
            history.pushState("STEP3", null, "/step3.html");
          }

          target = document.getElementById("NextLink");
          target.style.display = "block";
          break;
        case 3:
          target = document.getElementById("title");
          target.innerHTML = "Step 4";
          target = document.getElementById("text");
          target.innerHTML = "ステップ４の説明です。";

          if (history_flag == true) {
            history.pushState("STEP4", null, "/step4.html");
          }

          target = document.getElementById("NextLink");
          target.style.display = "block";
          break;
        case 4:
          target = document.getElementById("title");
          target.innerHTML = "Step 5";
          target = document.getElementById("text");
          target.innerHTML = "ステップ５の説明です。";

          if (history_flag == true) {
            history.pushState("STEP5", null, "/step5.html");
          }

          target = document.getElementById("NextLink");
          target.style.display = "none";
          break;

      }
    }

    window.addEventListener('popstate', function (e) {
      target = document.getElementById("output");
      switch (e.state) {
        case "STEP1":
          pageid = 0;
          break;
        case "STEP2":
          pageid = 1;
          break;
        case "STEP3":
          pageid = 2;
          break;
        case "STEP4":
          pageid = 3;
          break;
        case "STEP5":
          pageid = 4;
          break;
        default:
          pageid = 0;
      }
      SetDisplay(false);
    });
  </script>
</head>

<body>
      <div id="title"></div>
      <div id="text"></div>
      <div id="NextLink"><a href="javascript:void(0);" onclick="NextClick();">次へ</a></div>
</body>
</html>

解説

先のページ制御のできないコードから下記が追加されています。リンクをクリックしてページ遷移した場合に history.pushState() メソッドを呼び出しページ履歴を追加します。

  if (history_flag == true) {
    history.pushState("STEP2", null, "/step2.html");
  }

addEventListener() メソッドを呼び出し、popstateイベントを実装します。popstateイベントでは、stateの値を確認し、値に応じたpageidを設定し、SetDisplay() 関数を呼び出して画面表示内容を変更します。popstateでページを切り替えた場合は、SetDisplay()関数の引数にfalseを与え、pushStateメソッドを呼び出さないようにします。~

  window.addEventListener('popstate', function (e) {
    target = document.getElementById("output");
    switch (e.state) {
      case "STEP1":
        pageid = 0;
        break;
      case "STEP2":
        pageid = 1;
        break;
      case "STEP3":
        pageid = 2;
        break;
      case "STEP4":
        pageid = 3;
        break;
      case "STEP5":
        pageid = 4;
        break;
      default:
        pageid = 0;
    }
    SetDisplay(false);
  });