IEでもできた! jQuery.ajaxでShift JIS(sjis)の外部HTMLを読み込む時の文字化け回避方法
jQuery.ajaxではいろいろなファイルが外部から読み込めて便利ですが、文字コードがUTF-8でないと、そのままで文字化けしてしまいます。
最近作るサイトはもうほとんどUTF-8が主流になってきていますので問題ないことが多いのでしょうが、どうしてもshift_jisを使う必要があって、この文字化けに遭遇。文字コードは変えられないので、なんとかしてshift_jisの文字化けを回避できない物かと調べたのですが、解決方法ありました。
結論から言うと、読み込むときのオプションに下記の3行を追加するだけです。
beforeSend: function(myData){
myData .overrideMimeType("text/html;charset=Shift_JIS");
},
例えば全体ではこんな感じ。
「data.html」を読み込んで文字化けを回避するため文字コードの指定をShift_JISに変更、読み込みが成功したら#contにappendしています。
$.ajax({
url:"data.html",
beforeSend: function(myData){
listData.overrideMimeType("text/html;charset=Shift_JIS");
},
success: function(myData){
$("#cont").append(myData);
},
error:function (myData){
alert("読み込み失敗");
}
});
いや、簡単に解決できて良かった良かった。
--(2012/11/05追記)
と思ったらちょっと待て。IEでうまくいかないことが分かりました。。。
ダメジャン。
その後もう少し調べてみましたが、IE以外ならできるという結論になっているようです。
(T_T)
…なんか抜け道ないものか。
--(2012/11/05追記-2)
IEでもできましたっ!
ただし、JavaScriptではなく、サーバーサイドでの対策です。
プログラマにやってもらったんで、詳しい理屈は分かりませんが、私の理解で言うとこういうこと↓
jQueryのajax読み込みで、読み込むファイルの文字コードがUTF-8と認識されてしまうことが問題である。
従って、強制的にShift-JISであると認識させれば良い。
IE以外のブラウザでは、overrideMimeTypeを使うことでそれができるが、IEではoverrideMimeTypeが使えない。
代わりにサーバー側でファイルを送り出すときに、Shift-JISであることを明示する。
で、具体的な対策の手法ですが、.htdocsに次の一行を追加するということになります。
AddDefaultCharset Shift_JIS
これで読み込むファイルをajaxにもShift-JISとして認識してもらえます。
注意点としては、デフォルトの文字コードがShift-JISになりますので、HTMLの中で文字コードを明示していないファイルでShift-JISでないものは、文字化けしてしまいます。
.htdocsの置き場所によっては今までに作った他のページに悪影響を及ぼす可能性もあります。
そんなわけで、なんやかんやで長くかかってしまった、ajaxの問題、解決して良かった良かったと言うことで。
--
最近作るサイトはもうほとんどUTF-8が主流になってきていますので問題ないことが多いのでしょうが、どうしてもshift_jisを使う必要があって、この文字化けに遭遇。文字コードは変えられないので、なんとかしてshift_jisの文字化けを回避できない物かと調べたのですが、解決方法ありました。
結論から言うと、読み込むときのオプションに下記の3行を追加するだけです。
beforeSend: function(myData){
myData .overrideMimeType("text/html;charset=Shift_JIS");
},
例えば全体ではこんな感じ。
「data.html」を読み込んで文字化けを回避するため文字コードの指定をShift_JISに変更、読み込みが成功したら#contにappendしています。
$.ajax({
url:"data.html",
beforeSend: function(myData){
listData.overrideMimeType("text/html;charset=Shift_JIS");
},
success: function(myData){
$("#cont").append(myData);
},
error:function (myData){
alert("読み込み失敗");
}
});
いや、簡単に解決できて良かった良かった。
--(2012/11/05追記)
と思ったらちょっと待て。IEでうまくいかないことが分かりました。。。
ダメジャン。
その後もう少し調べてみましたが、IE以外ならできるという結論になっているようです。
(T_T)
…なんか抜け道ないものか。
--(2012/11/05追記-2)
IEでもできましたっ!
ただし、JavaScriptではなく、サーバーサイドでの対策です。
プログラマにやってもらったんで、詳しい理屈は分かりませんが、私の理解で言うとこういうこと↓
jQueryのajax読み込みで、読み込むファイルの文字コードがUTF-8と認識されてしまうことが問題である。
従って、強制的にShift-JISであると認識させれば良い。
IE以外のブラウザでは、overrideMimeTypeを使うことでそれができるが、IEではoverrideMimeTypeが使えない。
代わりにサーバー側でファイルを送り出すときに、Shift-JISであることを明示する。
で、具体的な対策の手法ですが、.htdocsに次の一行を追加するということになります。
AddDefaultCharset Shift_JIS
これで読み込むファイルをajaxにもShift-JISとして認識してもらえます。
注意点としては、デフォルトの文字コードがShift-JISになりますので、HTMLの中で文字コードを明示していないファイルでShift-JISでないものは、文字化けしてしまいます。
.htdocsの置き場所によっては今までに作った他のページに悪影響を及ぼす可能性もあります。
そんなわけで、なんやかんやで長くかかってしまった、ajaxの問題、解決して良かった良かったと言うことで。
--
コメント