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つの読み込み方で読み込もうとしている。
既にコメントで色々記載しているが、ブラウザごとに色々引っかかったポイントがあった。
- 当然だが、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 で読み込むと文字化けしないのはなんで?