Strutsのincludeディレクティブで取り込んだJavaScriptから値をJSPに設定すると文字化けする

Question

###前提・実現したいこと
現在Strutsでページング処理をする画面を作っています。

Strutsのincudeディレクティブで、JavaScriptファイルをインクルードし、JavaScriptから表示するページ番号をJSPに設定して表示させたいです。

###発生している問題・エラーメッセージ
javaScript側で設定した値自体は表示されているのですが、その「ページ」部分の文字が文字化けしてしまいます。
（1ページ というように文字化けしています。）

###該当のソースコード
JavaScriptファイル（※該当部分を抜粋）
function pageFunc() {
var pageNum = document.forms[0].page.value;
var page = document.getElementById("page");
page.innerHTML = pageNum + "ページ";
}

JSPファイル（※該当部分を抜粋）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" buffer="128kb" autoFlush="false" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ include file="../js/VB01ShohinIchiran.js" %>

<%-- ページ番号表示部分 --%>

<td width="170"> <span id="page"></span>&nbsp;&nbsp; </td>

###試したこと
JavaScriptファイル側で文字コードが設定されていないのが問題なのではないかと思い

<script type="text/javascript" charset="UTF-8"> というように文字コードを設定いたしましたが、文字化けはなおりませんでした。 ###補足情報(言語/FW/ツール等のバージョンなど) Java 1.8.0_40 Struts 1.3.10 Tomcat 8.0.33 Internet Explorer11

Comments

[kentei_syunrai]

JSPのcharsetの値がダブルクォートでうまく囲めてないのは、書き間違いですか?

[TETSUO]

JSPのPageディレクティブのcontentTypeの属性値はMIMEタイプと文字コードの設定をダブルクォートで囲む書式になっているので、書き間違いではありません。試しにcharsetの値をダブルクォートで囲むとJSPはコンパイルエラーになりました。

Answer 1

インクルードしているjsファイルの先頭行に次のディレクティブを追加してください。

<%@ page pageEncoding="UTF-8" %>

Comments

[TETSUO]

A-pZさん回答ありがとうございます。
インクルードしているJavascriptファイルの先頭行に
<%@ page pageEncoding="UTF-8" %>
のディレクティブを追加したところ、正常に文字が表示されました。
助かりました。本当にありがとうございました。

Answer 2

Javascriptで表示させている「ページ」以外に、JSPで表示させている文字も文字化けしてしまいますか？

Javascriptで表示させている部分だけ文字化けしている場合、Javascriptファイルに問題がありそうです。
JSPで表示させている文字も文字化けしている場合、ブラウザで思った通りにエンコードされていない可能性があります。

---

可能性としては以下が考えられます。
順を追って原因を確認してみてください。

• JavascriptのファイルがUTF8以外で保存されている（ShiftJISなど）
• JSPファイルがUTF8以外で保存されている
• ブラウザのエンコードが「UTF8」以外（自動判別でUTF8にならない場合を含む）になっている

Comments

[TETSUO]

文字化けしているのは、Javascriptで表示させている部分だけです。
JSPは文字化けしていません。
以下、順次確認いたしました。
•JavascriptのファイルがUTF8以外で保存されている（ShiftJISなど）
確認結果:Javascriptファイルは文字コードがUTF-8で保存されていました。
•JSPファイルがUTF8以外で保存されている
確認結果:JSPファイルは文字コードがUTF-8で保存されていました。
•ブラウザのエンコードが「UTF8」以外（自動判別でUTF8にならない場合を含む）になっている
確認結果:ブラウザの文字コードを確認したところ、日本語(Shift-jis)になっていたのでUnicode(UTF-8)に設定しましたが、文字化けは直りませんでした。