例えば、EUC-JPでエンコードされているブログページに送信Formを貼り付けたいが、送信先のURLはShift-JISだった場合など。
よくある対策は、
<form method="get" action="xxx.html"
Accept-charset="Shift_JIS">
<input type="text" name="word" size=20 >
<input type="submit" value="送信" >
</form>
のようにAccept-charset属性で送信先URLの日本語文字エンコード(Shift-JIS)を指定して促す方法である。
しかしこの設定はFirefoxなどでは有効だが、IEでは無効である。
そこで、Javascriptを使ってFirefoxでもIEでも異なる日本語文字コードでForm送信する方法が以下だ↓
<form name="f1" id="f1" method="get"
onsubmit="return false;" action="xxx.html"
Accept-charset="Shift_JIS">
<input type="text" name="word" size=20 >
<input type="button" value="送信" onclick="org=document.charset;
document.charset='shift_jis';
document.f1.submit();document.charset=org;">
</form>
これで、こちら側がEUC-JPでも送信フォームへはShift_JISで渡される。ポイントは、
■フォームのonsubmitにreturn falseを指定して通常のSubmit動作を無効
■送信ボタンのtypeはsubmitではなくbuttonにして通常のSubmit動作を無効
■送信ボタンのonclickイベントハンドラでフォーム(f1)の送信(submit)をjavascriptで実行、この時、送信の前後でdocument.charset関数を実行して文字コード変換を行う。
さらにこれだけではちょっと問題が、、、、、
上記の対策でほぼうまく行くのだが、送信先のURLに行った後に”戻る”などで元のページに戻ってみると、元ページ全体(document全体)が文字化けしてしまっているという問題に直面する。どうやら最後のdocument.charset=org;が効かない模様。
そこで、フォームの送信先URLはブラウザの別ウィンドウをポップアップして送信することでも用途を充たしてくれそうだったのでwindow.openで別窓を開くことにした。ボタンのonclickでの処理が少々複雑。
<form name="f1" id="f1" method="get"
onsubmit="return false;" action="xxx.html"
Accept-charset="Shift_JIS">
<input type="text" name="word" size=20 >
<input type="button" value="送信"
onclick="send=window.open('','send','');
document.f1.target='send';
org=document.charset;
document.charset='shift_jis';
document.f1.submit();document.charset=org;">
</form>
フォームの部分をiframeにして、異なる日本語文字エンコードにする方法もあると思う。