ksk1015のブログ

html, css, javascript 等のウェブ制作の技術をブログしてきます。あばばばばば。

ajaxzip3のIEでの文字化け対策

記事がすごくわかりづらいので古いIEで文字化けしない対策を書いとく

 

b.setAttribute("src",a);b.setAttribute("charset","UTF-8");

   ↓

b.setAttribute("charset","UTF-8");b.setAttribute("src",a);

 

 

 

ajaxzip3というのはフォームで郵便番号を入力すると自動的に住所を埋めてくれる奴です。

http://code.google.com/p/ajaxzip3/

これのいいところは郵便番号データはこれを配布してる人が管理していて
jsonでそこから取ってくるので、郵便番号データを最新にする等のメンテが不要というものです。

ちなみに僕はこちらよりも

jQuery.zip2addr https://github.com/kotarok/jQuery.zip2addr

をオススメします。
こちらはajaxで外部からデータを持ってくる点では同じなのですが、
Google 日本語APIを使って郵便番号を投げると住所を返してくれるのを利用しているのです。
まずその方法が賢いし、ajaxzip3よりGoogleの方が永続的に使える可能性が高そうです。
jqueryが必要ですが。 

で、ajaxzip3でIEだと文字化けするというバグがありますので、その現象と原因と回避策を。

◆現象

utf-8以外のページで、上三桁が同じ郵便番号を入力した場合に自動入力される住所が文字化けします。

例えば

 421-0422 → 静岡県牧之原市静波

の次に

 421-0421 → 文字化け

という感じです。同じ郵便番号でも文字化けします。

◆原因

文字コードが異なるjsを読み込むときはscriptタグにjsの文字コードを指定します。 

 <script type="text/javascript" src="hoge.js" charset="UTF=8"></script>

こんなふうに。こうしないと日本語を扱ってる場合は文字化けしてしまいます。

ajaxzip3でもちゃんとcharset属性をしていしてjsonを読み込んでいます。
実際、他のブラウザでは問題は起こりません。 

IEの場合はキャッシュ時に文字化けが起こります。
キャッシュ時はcharset属性を認識してないっぽい。

◆解決

こういう問題が起こるのは、
たぶんIEの場合は src="hoge.js" を認識した時点でキャッシュがある場合は
それ以降の属性を読み込まない?、少なくともcharset属性で指定した文字コードを無視して
そのページの文字コードとしてjsを読み込んでしまう。

なので 

 <script type="text/javascript" src="hoge.js" charset="UTF=8"></script> 

   ↓

 <script type="text/javascript" charset="UTF=8" src="hoge.js"></script> 

こんなふうに文字コードを先に指定してあげると、文字化けしないです。

ajaxzip3の場合はjsonを読み込むためにscriptタグを挿入するところを

 b.setAttribute("src",a);b.setAttribute("charset","UTF-8");

   ↓

 b.setAttribute("charset","UTF-8");b.setAttribute("src",a);

こんなふうに書き換えてあげると、文字化けは起こりません。

◆p.s.

IEではimgタグでキャッシュがある場合はloadイベントがスルーされるのバグ?仕様?と似てる気する。

 img.src = src;
 img.load = callbak; // キャッシュがあるとcallbackが呼ばれない

  ↓

 img.load = callbak;
 img.src = src;  // キャッシュがあってもcallbackが呼ばれる

というふうに、先にイベントハンドラ付けて上げるとスルーしない。