ホーム
WEB制作
WEBサイトをテンプレート化する方法

jQuery で外部ファイルを読み込んだ時に文字化けするのを解消する方法

jQuery で外部ファイルを load して読み込むと、テンプレートやテキストファイルをページ内に読み込む事ができる。

具体的には、<head>内と<body>内にに以下のように記述する。

もっと詳しく知りたい方は、Scriptでサイトをテンプレート化する方法とそのデメリットをご覧ください。

<head>

<!-- jQueryのファイル名は変更する -->
<script type="text/javascript" src="/js/jquery-*.*.*.min.js" >

</head>

<body>

<script>
$(function() {
$("#▲▲▲").load("●●●.txt");
});
</script>

<noscript>Java Script が無効になっています。このページは Java Script で読み込まれています。</noscript>

<div id="▲▲▲"></div>

<body>

これで、任意の場所のテキストファイルを読み込んで表示することができる。

ところが、このスクリプトによるテキストファイルの load が文字化けして上手く行かないことがある。

スクリプトの charset を Shift_JISに設定してもダメ。
読み込むテキストデータの文字コードを UTF8に設定 したときだけ上手く行く。

「なんでやーo(｀ω´ )o」と言うことで調べてみたら、どうやらこれは『 jQuery の仕様 』らしい。

jQuery は UTF8の文字コード しか対応していないので、読み込むテキストファイルや HTMLファイルや PHPファイルの文字コードを Shift_JIS で作ってしまうと、文字化けしてしまうのだ。

ちなみに、読み込んで表示する側は Shift_JIS でも大丈夫だ。

読み込むファイル

UTF8　→　○
Shift_JIS　→　×

読み込んで表示する側

UTF8　→　○
Shift_JIS　→　○

文字化けするのを解消する方法

今まで、部品用ファイルも、HTMLファイルも、全部 Shift_JIS で作ってきた。
今更、UTF8で保存し直すのはめんどくさい。

一括で文字コードを変更するソフトもあるようだが、何らかの不具合が出て、ファイルがグチャグチャになるのも困る。
（バックアップデータを作るのも面倒だし、一々チェックするのはもっと面倒くさい）

そこで、何とかならないか調べてみたら、以下のページに文字化けするのを解消する方法が載っていた。　

.loadでの文字化けを防ぐ

どうやら、以下のコードを追加することで、読み込むファイルの文字コードが Shift_JIS でも大丈夫なように変更できるらしい。

$.ajaxSetup({
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=Shift_JIS");
}});

ajaxSetup
ajaxの設定

before Send
( テキストデータを ) 送る前に

function
関数

override
無視する・無効にする

MimeType
データ形式
( text/htmとか text/cssとかみたいなもの )

charset=Shift_JIS"
Shift_JISの文字コード

早い話が『 テキストデータを送る前に、文字コードのShift_JISは無視してね！ 』と言ってるのだ。
（無視しないと、jQuery が文字を強制的にUTF8に変換してしまい、文字化けを引き起こしてしまうため）

全部英語だが、意味が分かればどうということはない。
テキストデータを読み込むためのスクリプトに組み入れるには、具体的にはこうやって記述する。

<script>

//文字コードの指定
$.ajaxSetup({
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=Shift_JIS");
}});

//ファイルのロード（読み込み）の指定
$(function() {
$("#▲▲▲").load("●●●.txt");
});

</script>
<div id="▲▲▲"></div>

文字コードの指定は、Shift_JISだけでなく他のコードでも可能だ。

xhr.overrideMimeType("text/html;charset=●●●");

あとは、●●●の部分を好きな文字コードに変更する。

xhr.overrideMimeType("text/html;charset=EUC");
xhr.overrideMimeType("text/html;charset=unicode");

次ページ

これから

前ページ

【難問解決】 SSIのインクルードで圧縮できるか実験してみた

広告

このカテゴリの記事
その他のカテゴリを見る