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

• ローカルに HTML ファイルがある。エンコーディングは UTF-8 を指定している。
• これとは別に、同じフォルダ内に Shift-JIS 形式の別の HTML ファイルがある。

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

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

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

• 調査したブラウザ：
  • IE11
  • Firefox
  • Chrome
  • Edge (※ 2020-12-23 追記 : 当時の Legacy Edge のことです)
• 呼び元の HTML ファイル：
  • ローカルにある UTF-8 のファイル
• 読み込む HTML ファイル：
  • ローカルにある Shift-JIS のファイル (基本は文字化けするが、文字化けさせずに読み込みたいファイル)
  • ローカルにある UTF-8 のファイル (呼び元との組み合わせ的にも、基本的に文字化けしないファイル)
• 読み込み方：
  • jQuery.load()
  • jQuery.ajax()
  • jQuery.get()
  • Scripting.FileSystemObject

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

呼び元が 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つの読み込み方で読み込もうとしている。

• ローカルの HTML ファイルから他の HTML ファイルを読み込むテスト

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

• 当然だが、Scripting.FileSystemObject は ActiveXObject が使える IE11 でのみ使える。Firefox や Chrome は勿論だが、Edge も ActiveXObject に対応していない。
• Firefox は jQuery の ajax() と get() の引数で dataType を指定しないとエラーが出て読み込めない。
• Chrome でローカルの HTML ファイルから ajax() などを動作させるには、--allow-file-access-from-files という引数を与えて Chrome を起動させる必要がある。
  • Windows なら「ファイル名を指定して実行」で以下のように起動する。
  • chrome –allow-file-access-from-files
  • 参考：jQuery.load()をChromeで使う時にちょっとハマったこと | バシャログ。

結果の画面キャプチャ

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

IE11

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

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

Firefox

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

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

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

• 参考：JavaScriptからローカルファイルを作成する方法まとめ - あらびき日記
• 参考：Firefoxのjavascriptでローカルファイルにアクセスする方法まとめ - 開発者
• 参考：javascript - How to reset netscape.security.PrivilegeManager.enablePrivilege? - Stack Overflow

Chrome

Chrome も Firefox と同様の表示。

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

Edge

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

以上

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

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