SafariでAJAX - Scriptエレメントとして読み込むjavascriptソースは、charsetをヘッダで指定した場合でも文字化けする

前回に引き続き Safari でAJAXなアプリ作る際の UTF-8 日本語文字化けについてもうひとつ。WebやAJAX関連の書籍を調べてみると、大抵、

Safariの文字化けを防ぐには、サーバサイドからのレスポンスにはBOMをつけるべし

といった対応を推奨しています。これできちんとSafariでも日本語が化けないようになるのでナイス！なんだけど・・・なんか、こう、サーバサイドでBOMくっつける行為が好きになれくて。泥臭い感じがするから？

基本的には、HttpRequest (Ajax.Request) の responseText には、HTTPヘッダにて charset を指定してあげる事で、また responseXML には、XMLヘッダにて charset を指定してあげる事で文字化けは全部解消できていたものの、ここにきて、こんな風には対処できない新手に出くわしてしまってがっかりです。Safari ってば... orz

Scriptエレメント→appendChild する場合がNG

外部のjavascriptソースを、こんな風に読み込む場合:

var s = document.createElement("Script");
s.src = 'my.js'; // 日本語が含まれているソース
document.body.appendChild(s);

サーバ側でmy.jsを出力する際、HTTPヘッダにcharsetを指定しても駄目みたいです。こんな感じのテストコード一式を用意して確認しました。 不具合確認したSafariのバージョンは 1.3.2 と 2.0.3 です。※なお、同じ my.js を普通に <script> タグで読み込んだ場合は問題なく日本語は認識されます。

対応策 - BOM をつけるべし

これに対応するにはサーバ側でコンテンツ出力する際にBOMをつけるしかなさそうです。とほほ。

まとめ

もう全部 BOM つけときゃいいじゃんという声が聞こえる中、往生際悪く、各ケース別に UTF-8 日本語文字化けの対応方法を分けると、

responseText には HTTP ヘッダの charset 指定で:

Content-Type: text/javascript; charset=UTF-8

responseXML には XML ヘッダの encoding 指定で:

<?xml version="1.0" encoding="UTF-8"?>

Script エレメントを appendChild する場合はサーバ出力に BOM をつける事で:

print "\x{ef}\x{bb}\x{bf}";

Safari での文字化けにガッツリ対応できるのではないかと思われます。