<<	2024 / 4	>>
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

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

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

この記事は最終更新日から1年以上が経過しています。

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は使えない。
思いついた方法は二つ。

form内にhiddenフィールドを持たせる
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ページ制作で一番大変な部分だと思います。
ご参考になれば幸いです。

0いいね！

(´・ω・｀)何度も押してくれて嬉しいけど、一回きりなんだ。
(´・ω・｀)ごめんね？

技術の記事