IE 限定・ローカルにある UTF-8 の HTML ファイルから Shift-JIS 形式のファイルを文字化けさせずに読み込む方法

この UTF-8 の HTML ファイルから、Shift-JIS のファイルを読み込んで、インラインに展開させたい。jQuery の load() みたいなことをしたい。

しかし、jQuery の ajax() やら get() やら load() やらは、いずれも UTF-8 のファイルを読み込むのがデフォルトになっているので、Shift-JIS のファイルを読もうとすると文字化けしてしまう。

そんなワケで、ローカルの HTML ファイルから他の HTML ファイルを読み込む jQuery のメソッドを試してみつつ、読み込む対象のファイルのエンコード指定と文字化けの関係を調べてみた。

長くなりそうなので先に結論を

呼び元が UTF-8 の HTML ファイルで、Shift-JIS の別ファイルを読み込みたい時は、Scripting.FileSystemObject を使って Shift-JIS のファイルを読み込み、ReadAll() などで拾った値を jQuery.html() の引数にでも与えてやれば、両ファイル間で文字コードが違っても文字化けせずに読み込める。

FileSystemObject が使えるのは ActiveXObject が使える IE11 だけで、かつローカルでしか使えないと思うので、「IE11 限定」「ローカルにある HTML ファイル限定」というワケ。

では、以下、順に試してみる。

呼び元の HTML ファイル

まずはテストするための、呼び元の HTML ファイルを作った。以下のような感じで、Shift-JIS の HTML と、UTF-8 の HTML とを、それぞれ4つの読み込み方で読み込もうとしている。

既にコメントで色々記載しているが、ブラウザごとに色々引っかかったポイントがあった。

結果の画面キャプチャ

順に表示結果を見てみる。

IE11

IE11 での結果

画面左下の「Shift-JIS」:「FileSystemObject」部分。UTF-8 の HTML ファイルであるにも関わらず、Shift-JIS の HTML ファイルを読み込んで文字化けせずに展開できている。それ以外の jQuery を使った方法では文字化けしてしまっている。

また、UTF-8 のファイルを FileSystemObject で読み込んでも文字化けしてしまうことから、有効なのは「UTF-8 の HTML ファイルで Shift-JIS の HTML ファイルを読み込む場合」のみ。また、FileSystemObject の性質上、サーバを介して使用することはないだろうから、ローカルの HTML ファイルでのみ使える技、ということになる。

Firefox

Firefox での結果

以降は同じソースを他のブラウザで見てみただけ。

Firefox でも Shift-JIS の HTML ファイルは文字化けしているほか、ActiveXObject が使えないので FileSystemObject も当然使えない。

Firefox は別の方法でローカルの HTML ファイルを読み書きできるみたいだけど、Components がもう使えない?らしく、うまくいかなかった。

Chrome

Chrome での結果

Chrome も Firefox と同様の表示。

Chrome でローカルファイルを操作するには File API が使えるらしい。試してない。

Edge

Edge での結果

Windows10 にしたことだし、Edge でも見てみた。Edge は ActiveXObject がサポートされていない他、セキュリティ設定の問題か、ローカルで Ajax ができないみたい。

以上

未だに IE しか使わせてもらえないレガシープログラマにとって、JScript・FileSystemObject はまだまだ現役。……泣ける話や……。

それにしても、FileSystemObject で読み込むと文字化けしないのはなんで?