• HOME
  • HTML/CSS
  • ページの文字コードとは違う任意の文字コードをformから送信する方法

ページの文字コードとは違う任意の文字コードをformから送信する方法

管理人:sofu

楽天検索やYahoo!オークションなどの検索窓を設置したとき、設置したページの文字コードと違う文字コードで検索キーワードを送らないといけない場合（例：UTF-8の設置ページで、EUC-JPの検索キーワードを送る場合）、少し面倒な処理が必要なんですね。今回はYahoo!オークションで試してみます。あ、今回はCSSに一切触れませんので、あしからず。

普通にformを設置したら、キーワードが文字化けする。

設置ページの文字コードと検索先の文字コードが異なるので、上手く検索できません。

 
<form name="yahooSubmit" method="get" action="http://search.auctions.yahoo.co.jp/jp/search/auc">
    <input type="hidden" name="auccat" value="0" />
    <input type="hidden" name="alocale" value="0jp" />
    <input type="hidden" name="acc" value="jp" />
    <input type="text" size="32" name="p" value="" />
    <input type="button" value="検索" onclick="document.yahooSubmit.submit();" />
</form>
 
設置側と検索先の文字コードが違うサンプル

ブラウザは設置ページの文字コードでエンコードして送信するので、検索先のページでは正しくデコードできないんです。

<form>要素のaccept-charset属性とJavaScriptで解決

<form>要素にはaccept-charset属性というのがあって、検索先に送信するcharsetを指定できるみたいです。このページはUTF-8ですけど、EUC-JPで送信したいのでaccept-charset="EUC-JP"と追加します。ただ、IEではaccept-charset属性をサポートしていないので、onclickにdocument.charset='EUC-JP';を指定します。詳しいことは複数の文字コードをformからCGIへ送信する方法をご覧ください。

 
<form name="yahooSubmit" method="get" action="http://search.auctions.yahoo.co.jp/jp/search/auc" onsubmit="return false;" accept-charset="EUC-JP">
    <input type="hidden" name="auccat" value="0" />
    <input type="hidden" name="alocale" value="0jp" />
    <input type="hidden" name="acc" value="jp" />
    <input type="text" size="32" name="p" value="" />
    <input type="button" value="検索" onclick="document.charset='EUC-JP'; document.yahooSubmit.submit();" />
</form>
 

IEでは、戻るボタンを押したら元のページが文字化けを起こす

検索側に送信する前に文字コードを変換して送信する仕組みなので、戻った時にページが変換されたままの状態になっているみたいです。そこで、戻った時に再リロードして文字コードを元に戻すJavaScriptを設置します。実際に設置する場合は説明コメントをとってください。エンコードの関係でIEでエラーが出てしまいます。

 
function search_back(){
	var isMSIE = /*@cc_on!@*/false;	//IE判別
	if (isMSIE) {
		if(document.charset!="utf-8"){ //文字コードが変換されているかチェック
			document.charset="utf-8"; //変換されていたら指定の文字コードに戻す
			location.reload();
		}
	}
}
 

IE6は元のページに戻ってもJavaScriptが動かないので</title>の前に半角文字または半角スペースを入れます。仕様なのかバグなのか分かりませんが、これでだけでJavaScriptが動きます。

 
<title>タイトル </title>
 

文字コードを解決したサンプル

ちょっとスマートじゃありませんけど、何とかformを設置できました。できるならCGIを経由し文字コードの変換をさせる方法がいいと思います。どのようにして文字コードを解決するかはページの構造やサーバの環境を考慮して使い分けてみてください。

date 2010.10.28
blog comments powered by Disqus

PageTop