Rainbow Engine

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

JavaScript

JavaScriptのhistory.pushState()とは?

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

<目次>

(1) JavaScriptのhistory.pushState()とは?
 (1-1) 概要
 (1-2) 構文
 (1-3) サンプルプログラム
 (1-4) 使いどころ

(1) JavaScriptのhistory.pushState()とは?

(1-1) 概要

history.pushState()メソッドを使うと、ブラウザのセッション履歴に狙ったレコードを追加する事ができます。pushState()メソッド自体の挙動としては、ブラウザのアドレスバーに出ているURLを「書き換え」しつつ、表示されているページはそのまま残す、という動きになります。

(history.pushStateの機能)
・①ブラウザのアドレスバーのURLを指定のURLに書き換え
・②ブラウザの履歴に指定のURLのレコードを登録
 
(図111)
 

目次にもどる

(1-2) 構文

(構文)

history.pushState(state, title [, url])

(構文説明)

引数名 必須/任意 説明
state 必須 履歴レコードとセットで生成されるJavaScriptのオブジェクトです。セット&取得はそれぞれ次のように実施できます。
●セット例
const state = { ‘user_id’ : ‘A001’, ‘user_name’ : ‘Rainbow’ }
●取得例
セットしたstateオブジェクトの取り出しは次のように行えます。
var tmp = history.state;
title 必須 理論上はブラウザのタブのタイトルを変更しますが、2021年3月時点では殆どのブラウザでこの「title」引数を無視しているようです。

そのため、実質的に利用されるのは「url」引数を使ったアドレスバーのURL書き換えのみで、その用途で使う際の「title」引数はnullで利用されるケースが多いです。

url 任意 アドレスバーのURLの変更後の値を指定します。

pushState()メソッドを実行後、ブラウザのアドレスバーはこのURLに指定した値に書き換わります。

目次にもどる

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

●JavaScript

JSP側の画面を押下すると「history.pushState」が実行され、その後「history.state」でstateで与えたObjectを取得してコンソールに表示しています。
 
(サンプル)
function PushStateTest(){

        //# history.pushStateの挙動確認①
        const state = { 'user_id' : 'A0001','user_name' : 'Rainbow' }
        const title = ""
        const url = './IT0xxx_JsHistoryPushState_AFTER.jsp'
        history.pushState(state,title,url)

        //# 第一引数(state)の取得・利用例
        var tmp = history.state;
        console.log(tmp);

}

 

●JSP

JavaScriptを起動するボタンを設置するための簡単な画面です。
 
(サンプル)
<%@ 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="js/IT0xxx_JsHistoryPushState_syntax.js" type="text/javascript" charset="UTF-8"></script>
<title>JavaScript history.pushState Test</title>
</head>
<body>
<h2>■history.pushStateの挙動確認①</h2>
<input type="button" value="PushStateテスト実行" onclick="PushStateTest()">
</body>
</html>
 
(図131)実行結果
挙動として以下の点が確認できています。
・アドレスバーのURLが書き換わっている
・ただし、表示されている内容はそのまま(再描画はされない)

・stateでセットしたオブジェクトが正しくコンソールに表示されている

(動画)
実際に画面のボタンを押してURLが書き換わる様子を動画にしたので、もしよければご確認ください。
 

(1-4) 使いどころ

さて、ここまでお読みになって「この機能ってどんな場面で使うの?」と疑問に思われた方もいらっしゃるかと思います。今回はJava(JSP/Servlet)においてpushStateが非常に有効に作用する用途を1つご紹介いたします。

 

●利用シーン

Servletにてforwardメソッドを使って、別画面(JSP)に遷移させる際に、通常だとURLがServletのまま残ってしまいます。
 
(図141)BEFORE

しかし、pushStateを利用する事で、このフォワード後のURLを実際に表示されているJSPのものに書き換える事ができます。これにより、ブラウザの履歴上もServletのURLではなく、JSPのURLが記録されるようになります。

(図142)AFTER

 
(動画)
まとめると次のようなイメージです。
(図143)

 

●利用シーンのソースコード

上記の(図142)AFTERのサンプルプログラムを掲載します。
JSP① ⇒ [ボタン押下] ⇒ Servlet ⇒ [forwardメソッド] ⇒ JavaScript発動 ⇒ JSP②
 
■JSP①
 
(ポイント)
ボタンを押下すると、formのactionで指定したServlet「IT0xxx_JsHistoryPushState_SERVLET」を実行するだけの画面です。
 
<%@ 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</title>
</head>
<body>
<h2>■history.pushStateの挙動確認②</h2>
<form method="POST" action="IT0xxx_JsHistoryPushState_SERVLET" name="Forward1">
<input type="text" name="field1" />
<br />
<br />
<input type="submit" value="Go To IT0xxx_JsHistoryPushState_SERVLET"/>
</form>
</body>
</html>
 
■Servlet
 
(ポイント)
特に処理は実施しておらず、単に「IT0xxx_JsHistoryPushState_AFTER.jsp」へforwardメソッドでフォワードしているのみです。
 
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_JsHistoryPushState_SERVLET")
public class IT0xxx_JsHistoryPushState extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String nextPage = "/IT0xxx_JsHistoryPushState_AFTER.jsp";
        RequestDispatcher rd = getServletContext().getRequestDispatcher(nextPage);
        rd.forward(request, response);
    }
}
 
■JavaScript
 
(ポイント)
ここが一番のポイントです。サンプルと同様に「history.pushState」が実行されてURLが書き換わり、その後「history.state」でstate引数で与えたObjectを取得してコンソールに表示しています。
 
更に全体をjQueryの「$(document).ready()」で囲む事によって、ドキュメントがロードされたタイミングで自動実行され、ユーザーからは元々URLが書き換え後(AFTER)の「IT0xxx_JsHistoryPushState_AFTER.jsp」であったかのように見えます。
 
$(function (){

    //# history.pushStateの挙動確認①
    const state = { 'user_id' : 'A0001','user_name' : 'Rainbow' }
    const title = ""
    const url = './IT0xxx_JsHistoryPushState_AFTER.jsp'
    history.pushState(state,title,url)

    //# 第一引数(state)の取得・利用例
    var tmp = history.state;
    console.log(tmp);

});

 

■JSP②
 
(ポイント)
URL書き換えのJavaScriptを発動させるため、jQueryのライブラリをインポートしています。
 
<%@ 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_JsHistoryPushStateTest.js" type="text/javascript" charset="UTF-8"></script>
<title>JavaScript history.pushState Test</title>
</head>
<body>
<h2>■history.pushStateの挙動確認②</h2>
<div>
Input Value = <%=request.getParameter("field1") %>
</div>
<br />
<a href="IT0xxx_JsHistoryPushState.jsp" >→ Back To IT0xxx_JsHistoryPushState.jsp.jsp</a>
</body>
</html>

 

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-JavaScript

執筆者:


comment

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

関連記事

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

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

JavaScriptでラジオボタンで選択された値を取得する方法(動画解説付き)

<目次> (1) JavaScriptでラジオボタンで選択された値を取得する方法 (2) パターン1:formタグ内部のラジオボタン  (2-1) 単一選択肢  (2-2) 複数選択肢 (3) パター …

JavaScriptのAddEventListenerの用途や使用例について

<目次> (1) JavaScriptのAddEventListenerの用途や使用例について  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム (1) JavaScriptの …

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

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

jQueryのget()メソッドの使い方やパラメーターについて

<目次> (1) jQueryのget()メソッドの使い方やパラメーターについて  (1-1) get()メソッドの概要  (1-2) get()メソッドのサンプルプログラム (1) jQueryのg …

  • English (United States)
  • 日本語
Top