Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

JavaScript

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

投稿日:2021年6月15日 更新日:

 

<目次>

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

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

(1-1) 概要

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

popstateイベントは、ブラウザの履歴を1つ以上追加した後に、ユーザがブラウザの「戻る」ボタンを押下した時に発動します。
 
(図111)popstateの発動イメージ
・①新しい履歴を追加(例:https://hostname/project/test.jspをリクエスト)

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

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

(1-2) 構文

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

(構文)
$(function (){
  //# 初回pushState
  history.pushState(null,null,'[履歴エントリに追加したいURL]');
  window.addEventListener('popstate',function (){
      //# 2回目以降のpushState
      history.pushState(null,null,'[履歴エントリに追加したいURL]');
    });
});
 
例えば、次のようにJSP① ⇒ Servlet ⇒ JSP②と画面遷移があり、JSP②の中で上記JavaScriptの構文が実行されるとします。
 
この時、Servlet ⇒ JSP②に遷移したタイミングで初回のpushStateが動いて「JSP②のURL」がブラウザの履歴エントリに追加され、アドレスバーのURLも書き換わります。
 
 
(図121)
 
この時、ユーザがブラウザの「戻る」ボタンを押下すると、popstateイベントが発動して、addEventListenerでそれを検知してfunctionの中のロジックが発動します。
 
functionの中では、先ほどと全く同じpushStateを実行して、また次に「戻る」ボタンが押された時に備えて、戻る先のページの履歴(同じURL)を用意しておく事で、あたかも「戻る」を押しても何も反応が無い(無効化されている)ように感じさせる事ができます(実際は「JSP②のURLのページに戻る」+「JSP②のURLを履歴追加」を延々と繰り返しているだけ)。
 
(図122)

(1-3) サンプルプログラム

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

(図131)挙動イメージ
画面(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 (){
        //# 2回目以降のpushState
        history.pushState(null,null,'./IT0xxx_JsPopStateTest.jsp');
        console.log("## popstate fired ## => history.pushState was executed ");
    });
});
 
(補足)
・「$(function(){…});」はjQueryの記述で、document要素が準備出来次第、中のfunctionを実行する機能です。
 
(図132)
 

●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>
 
(図133)
 

●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);
    }
}

(図134)

●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>

 

(図135)

●操作動画

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

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

Adsense審査用広告コード


Adsense審査用広告コード


-JavaScript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScriptでテキストボックスの値を取得する方法(動画解説付き)

<目次> (1) JavaScriptでテキストボックスの値を取得する方法 (2) 表記例①:document.[Form Name].[Element Id].Value  (2-1) 構文  (2 …

JavaScriptのMapとは?基本的な使い方やサンプルプログラムをご紹介

<目次> (1) JavaScriptのMapとは?基本的な使い方やサンプルプログラムをご紹介  (1-1) 概要・構文  (1-2) サンプルプログラム   ●JavaScriptのサンプル   ● …

JavaScriptで現在時刻をhhmmss形式で取得する方法

<目次> (1) JavaScriptで現在時刻をhhmmss形式で取得する方法  (1-1) 構文・要点  (1-2) サンプルプログラム (1) JavaScriptで現在時刻をhhmmss形式で …

JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法

  <目次> (1) JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法  (1-1) 構文①:オブジェクト作成  (1-2) 構文②:オブジェクトにアクセス …

「ブレークポイントは現在の設定ではヒットしません。生成コードが見つからなかったため、ブレークポイントは無視されました」エラーの対処メモ

  <目次> (1) 「ブレークポイントは現在の設定ではヒットしません。生成コードが見つからなかったため、ブレークポイントは無視されました」エラーの対処メモ  (1-1) 発生状況・エラーメ …

  • English (United States)
  • 日本語
Top