QA@IT

createElementによる要素追加時の文字化け

3438 PV

javascript, jQueryを使って「タブ」と「その内容」を追加できるよう作成しているのですが、追加時にCSSにUTF-8指定しているにもかかわらず日本語が文字化けしてしまいます。コードの一部は以下のようになっています。

var a = document.createElement("div");
a.innerHTML = "ファイル名:";

var b = document.createElement("input");
b.setAttribute("id", "save");
b.setAttribute("value", "保存する");

innerHTMLやsetAttributeに文字コードの指定など可能なのでしょうか??

  • OS, ブラウザは何ですか? 「追加時にCSSにUTF-8指定」とは具体的に何をしているのでしょう? アップされたコードには CSS は何も関係ないように見えますが。 -
  • MacOS MountainLion、ブラウザはchromeです。CSSの先頭に「@charset "UTF-8";」と記述しています。 -

回答

MacOS MountainLion は持ってないので実際に検証できないのですが、ごくごく基本的なことなので、多分 Windows の Chrome でも同じだろうと思って回答します。MacOS の特殊事情などがあって違っていたらすみません。

まず、今回のケースでは、少なくともアップされたコードを見る限りは、CSS は全く関係ないです。なので、

CSSの先頭に「@charset "UTF-8";」と記述しています。

というのは何も意味がないと思います。

たぶん、ブラウザが解釈したエンコードと実際に受信した html ソース(JavaScript のコードを含む)の文字コードが違っているのが原因だと思います。

Chrome 上に問題のページを表示して、 [ツール(L)] ⇒ [エンコード(E)] で Chrome が解釈しているそのページのエンコードを調べ、それと実際の html ソースの文字コード(ツールでパケットをキャプチャするなどして 16 進コードを見てください)を比較してみて、一致しているかどうか調べてください。

多分それが違うから文字化けが起こっているのだと思います。

編集 履歴 (1)
  • localhostでTomcatを使ってサーブレット側でout.printを使ってHTMLのように見せている場合、文字化けは起こらないのですが、別サーバで同様のことをすると文字化けしてしまいます。サーバ側の文字コードがUTF-8になっていないということなのでしょうか? -
  • Tomcat 何とかと言われても自分は分かりませんが、とにかく基本はブラウザが受信した html ソース(JavaScript のコードを含む)の文字コードと、ブラウザが解釈したエンコードが合っているか否かだと思います。先に書きましたように、まずはそこを確認してください。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。