Colorboxをiframe内から親ページへ展開するときにつまずいた話。

Colorboxをiframe内に設置して、そこから親ページへ展開しなければならない事態に出くわした。
なんでわざわざ……って思ったんだけど、要望なので仕方ない。
ので、検索したらありました。インターネットすごい。

参考:colorboxをiframe内から親ページに展開させる

ここに書いてあるとおりに設置したんだけど、iframeの外側で展開してくれない。
なんでじゃー、どうしてじゃーと頭を抱えながらソース弄ってみたけどどうしても展開してくれない。

結論は、Colorboxのv1.3.19じゃないと動かないでした。
最新版は動かない。v1.3系の最終バージョンもだめだった。ピンポイントでこのバージョンじゃないとだめらしい(1.3.18から下はためしてない)

めっちゃ悩んだよー。

使い方

  • 展開する親ページの方へcolorboxのjs/cssを読み込ませる(jQuery.js本体も)
  • iframe内へは以下を記述
<script>
function callparent(url,ttl){
parent.cbox(url,ttl);
}
</script>

<a href="javascript:callparent('URLを記述','タイトル')">リンク
  • 親ページに以下の記述を追加
<script>
    function cbox(url,ttl){
    var href = url;
    var title = ttl;
    $.fn.colorbox({
    width: "colorboxの横幅",
    height: "colorboxの縦幅",
    href:href,
    title:title,
    iframe: true,
    scrolling: "auto"
    });
    }
</script>

解決!