Colorboxでsubmit結果をiframe内に表示する

Coloroxでsubmit結果を表示したい。しかもiframe内に表示したい。

submit結果を表示するだけであれば、ググると次のような書き方がけっこうヒットする。

$('form').submit(function () {
  $.post($(this).attr('action'), $(this).serialize(), function (data) {
    $.colorbox({html: data});
  }, 'html');
  return false;
});

jQueryでPOSTして、結果をhtmlプロパティを使って表示している。
でもhtmlプロパティを有効にするとiframeプロパティが効かなくなってしまうため、このやり方だとiframe内に表示することができない。

というわけで、次のようにして無理やりiframe内にsubmit結果を表示する。

$('form').submit(function () {
  $.post($(this).attr('action'), $(this).serialize(), function (data) {
    $.colorbox({
      iframe: true,
      onComplete: function () {
        setTimeout(function () {
          $('iframe.cboxIframe').contents().find('body').html(data);
        }, 200);
      }
    });
  }, 'html');
  return false;
});

iframeプロパティを有効にするとColorboxはclass="cboxIframe"を持つiframeを作るので、その中にあるbodyタグをsumit結果に書き換えている。
setTimeoutを使わないと、自分のIEとFirefoxでは上手く表示されなかった。