ゲーム攻略からプログラミングまで、その時に思いついたことをだらだらと書き連ねていきます。

【HTML】外部サイトへPOSTする際の注意点

2015.01.17 10:00 | コメント(0) | 技術

program.jpg
IE嫌い

どうも、さつきさんです。

※この記事は、過去にお友達のブログネタに寄稿したものを加筆・修正したものです。
 ゴーストライターというほど大層なことは書いてないんですが、
 この度友人がブログを終了するとのことで、お引越しさせていただきます。


過去の自分の文章を自分で修正するとか、
一度滑ったギャグについて、どこが面白かったかを説明するような心境です。

以前ハマった内容と対策を残しておきますね。


やりたいこと

自身のサーバとは別で運用しているサーバの特定URLめがけてPOSTでデータを送る。


困ったこと

こちらのサーバとPOST先のサーバ内で処理する文字コードが違う。
※こちら側はUTF-8、無効がはSHIFT-JIS。

Accept-Charest属性

で、まず簡単に解決できないか探しているとこんな記述を発見。
<form method="post" name="hoge" accept-charset="shift-jis">

 ~ なんかパラメータ~
ふむふむ、accept-charset="letter_code"のletter_codeに渡したい文字コードを入れてやればいいのか。
試しにFireFoxで確認。
おおっ!渡せた!
こんな便利なものがあるとは!
んじゃ次にIEで・・・

(・ω・三・ω・)

動かない。

もう一度accept-charsetを調べてみる。

ふむふむIEはこの記述を無視するのか。

ダメな子!

FireFoxだけに対応しただけではあまりにもお粗末なので、この方法では×。


別案を考える

まず上記の通り、accept-charsetは使えない。
思いついた方法は二つ。
  1. form内にhiddenフィールドを持たせる
  2. submit時に一時的に文字コードを変換する

ざっくり説明すると、上はhiddenでその文字コード特有のエスケープ文字を置いて
無理矢理文字コードを認識させる方法。
こっちも試してみましたが、うまく動かない。
ダメだった。

で2番目。
これもかなりの力技ですね。
まずformを、
<form method="post" name="hoge" onsubmit="return false">

のように記述。
name属性が重要になってきますので、適当に設定してあげてください。
onsubmit="return false"とすることで送信ボタンを押してもPOSTされないようにします。
※onsubmit="return false"とすることで、
 入力フィールドでEnterキーを押しても送信されなくなります。


次に送信ボタンを、
<input type="button" onclick="document.charset='shift_jis'; document.hoge.submit();" />
のようにボタンに変更。
そしてonclickでこのボタンがクリックされた時に、
ページ全体の文字コードをSHIFT-JISに変換してから送信するようにします。
document.hoge~の部分はformのname属性で設定したものと合わせてくださいね。

各ブラウザで上記方法で試すとやっとうまく行った。
ようやく解決か・・・。


問題点

見落としてた
上記の通り文字コードを変換してページが遷移しているので、
IEユーザがブラウザバックを使って戻ると、文字化けしてしまいます。

また君か

この問題についてはこの辺りを参考にさせていただきました。
※参考にさせていただいたサイトが404になってたので、使用しているJavascriptを載せておきます。
function search_back(){

var isMSIE = /*@cc_on!@*/false;

if ( isMSIE ) {
if ( document.charset!='utf-8' ) {
document.charset='utf-8';
location.reload();
}
}
}
window.onload=search_back;
このJavascriptは、ブラウザがIEかどうかを判別し、IEならばページをリロードするというものです。

これでやっと満足できるかなー。


まだあった

しかし私の場合はまだ一つ課題が。
IE6でPOSTした時のみデータが飛んでない。
なんでだろうと何度か試すも、やっぱりうまくいかない。

結論から言うと結果はこれ。

target="_blank"

この指定をしているとIE6の場合POSTされません。
あれだな、タブブラウザですらないからだな。

ぬうううううううう(´;ω;`)
これのおかげでだいぶハマりました。
IE8で試した時は普通に動いたから全く意識してなかった…。

めんどくさいね、IE。
全部なくなれとは言わんからせめて7以下消えてくれんかなー。


あとがき

3年ほど前に書いた記事なのですが、IEに対する恨みつらみがすごいですね
いやまあ、未だに「IEが好きか」と聞かれたら、全力で「大嫌い」と答えます。
ブラウザは各社から出てますが、独自実装や独自解釈、あげくにはレンダリングエンジンも違うので、
全ブラウザで全く同じ表示・挙動にするというのはかなり気を遣うところです。
2015/1/17現在、Internet Explorer 6のサポートは切れてます。
お使いの方は最新のバージョンにアップデートしてくださいね。
免許の有効期限が切れてる状態で車運転してるのと同じです。

まあ憎々しくIEについて話すとすれば、まだIE7の呪縛が残ってます。
バグの多さでは6よりも上じゃないでしょうか?
残りの8~11のバージョンについては比較的優等生。
強いて言うなら8と9だけ変な動きすることがたまにあります。
Microsoftは最近また新しいブラウザを開発してるそうですね。

や め ろ

どうせピーキーなつくりになるんだから・・・。
ブラウザ戦争の経緯から、ブラウザによるHTML解釈の標準化は難しいんでしょうねえ・・・。
このあたりがWEBページ制作で一番大変な部分だと思います。
ご参考になれば幸いです。
技術の記事

コメント

まだコメントがありません...(´・ω・`)