JavaScriptでpopstateイベントが動かない？発動タイミングやサンプルプログラムをご紹介

＜目次＞

(１) JavaScriptでpopstateイベントが動かない？発動タイミングやサンプルプログラムをご紹介
　 (１-１) 概要
　 (１-２) 構文
　 (１-３) サンプルプログラム

(１) JavaScriptでpopstateイベントが動かない？発動タイミングやサンプルプログラムをご紹介

(１-１) 概要

●popstateってどんなイベント？

popstateイベントは、ブラウザの履歴を１つ以上追加した後に、ユーザがブラウザの「戻る」ボタンを押下した時に発動します。

（図１１１）popstateの発動イメージ

・①新しい履歴を追加（例：https://hostname/project/test.jspをリクエスト）

↓
・②ページが表示され、新しい履歴が追加された（例：https://hostname/project/test.jspの履歴エントリ追加）

↓
・③ブラウザの「戻る」ボタンを押下 ⇒ popstateイベント発生

＞目次にもどる

(１-２) 構文

popstateの用途を１つとして、ブラウザの「戻る」ボタン押下を無効化したい時などに使えます。次の（構文）はpushState関数とpopstateイベント、更にjQueryの「$(function(){…});」を巧みに組み合わせてブラウザの「戻る」ボタンを「抑止」するロジックの例です。

（構文）

$(function (){
  //# 初回pushState
  history.pushState(null,null,'[履歴エントリに追加したいURL]');
  window.addEventListener('popstate',function (){
      //# ２回目以降のpushState
      history.pushState(null,null,'[履歴エントリに追加したいURL]');
    });
});

例えば、次のようにJSP① ⇒ Servlet ⇒ JSP②と画面遷移があり、JSP②の中で上記JavaScriptの構文が実行されるとします。

この時、Servlet ⇒ JSP②に遷移したタイミングで初回のpushStateが動いて「JSP②のURL」がブラウザの履歴エントリに追加され、アドレスバーのURLも書き換わります。

⇒（参考）JavaScriptのhistory.pushState()とは？

（図１２１）

この時、ユーザがブラウザの「戻る」ボタンを押下すると、popstateイベントが発動して、addEventListenerでそれを検知してfunctionの中のロジックが発動します。

functionの中では、先ほどと全く同じpushStateを実行して、また次に「戻る」ボタンが押された時に備えて、戻る先のページの履歴（同じURL）を用意しておく事で、あたかも「戻る」を押しても何も反応が無い（無効化されている）ように感じさせる事ができます（実際は「JSP②のURLのページに戻る」＋「JSP②のURLを履歴追加」を延々と繰り返しているだけ）。

（図１２２）

＞目次にもどる

(１-３) サンプルプログラム

上記の挙動（「戻る」押下時に「popstate」発動し、同じURLに戻る）を実際に再現したサンプルプログラムをご紹介します。

（図１３１）挙動イメージ

画面（JSP②）を初めて開いた後、以降は「戻る」を押下しても同じURLに戻り続ける（つまり、表面上は戻るが「無効化」されているように見える）挙動のイメージです。

実際のソースコードを掲載します。

●JavaScript

$(function (){
    //# 初回pushState
    history.pushState(null,null,'./IT0xxx_JsPopStateTest.jsp');
    console.log("## document.ready fired ## => history.pushState was executed");

    window.addEventListener("popstate",function (){
        //# ２回目以降のpushState
        history.pushState(null,null,'./IT0xxx_JsPopStateTest.jsp');
        console.log("## popstate fired ## => history.pushState was executed ");
    });
});

（補足）

・「$(function(){…});」はjQueryの記述で、document要素が準備出来次第、中のfunctionを実行する機能です。

⇒（参考）jQueryの$(document).ready()とは？意味や使い方をご紹介

（図１３２）

●JSP①

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript history.pushState Test Before</title>
</head>
<body>
<h2>■【JSP①】popstate時にhistory.pushState</h2>
<form method="POST" action="IT0xxx_JsPopState_SERVLET" name="Forward1">

<br />
<input type="submit" value="Go To IT0xxx_JsPopState_SERVLET"/>
</form>
</body>
</html>

（図１３３）

●Servlet

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/IT0xxx_JsPopState_SERVLET")
public class IT0xxx_JsPopStateServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String nextPage = "/IT0xxx_JsPopStateTest.jsp";
        RequestDispatcher rd = getServletContext().getRequestDispatcher(nextPage);
        rd.forward(request, response);
    }
}

（図１３４）

●JSP②

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/IT0xxx_JsPopStateTest.js" type="text/javascript" charset="UTF-8"></script>
<title>JavaScript pop state Test</title>
</head>
<body>
<h2>■【JSP②】popstate時にhistory.pushState</h2>
<a href="IT0xxx_JsPopStateTest.jsp">→ Back To IT0xxx_JsPopStateTest.jsp</a>
</body>
</html>

（図１３５）

●操作動画

分かりにくいですが、JSP画面のボタン「Go To XXX」を押下すると、Servletを経由してJSP②に遷移します。その際にブラウザの履歴にServletとJSP②の情報が書き込まれます。

その後は、戻るボタンを押しても同じURL（JSP②）に遷移するのみで、JSP①には戻らない（戻るのを抑止している）様子が確認できます。

（動画）

＞目次にもどる