読者です 読者をやめる 読者になる 読者になる

fancyboxを使っていてiframe呼び出しでかつPOSTでデータを引き渡したい場合

jQueryプラグインのfancyboxはglobalの名前空間汚染とかもなく、swfとかiframeとかajaxとかtemplateとかが使えるので重宝しています。

ただ、iframeでは当然GETの呼び出ししか出来ず、データをPOSTで渡して表示させたいときには使うことができません。

時間がとれたら、作者にぺいっと投げつけたいとは思いますが、面倒なのでとりあえずやる方法。

方法は簡単で、適当なページをiframeで呼び出して、そのiframeに対してformのtargetを指定して、希望するページをactionにしてPOSTするだけです。
fancyboxでiframeで使うと、そのiframeはID=fancybox-frameとなり、適当な名前が振られます。
で、その名前をformのtargetにします。

<form id="myform" action= "希望のURL" method="POST" style="display:none;">
  <input name="hoge">
  <input type="submit">
</form>
<a>表示</a>
$('a').fancybox({type:'iframe', onComplete: function(){
  var name = $('#fancybox-frame').attr('name');
  $('#myform').attr('target', name).trigger('submit');
}});

こうしておくと、適当なページが開いたあとすぐにformへのPOSTが発火し、先ほどのiframe内で表示できます。