colorboxでiframeの高さを可変にする方法

謎のプリン語る。
プログラミングの役立つ、エンジニア技術情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

投稿日：2016年04月21日更新日：2016年04月24日

※この記事は9年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

本日、夜中、というか朝方まで起きて会社にきてしまいました。
アホです。

さて表記の件。
以前、3年も前にも書いた記事と同じだけど、もっといい方法を編み出したので、
記事を書いてみようかと。
ただし、モダンブラウザだと、セキュリティがうるさいのでクロスドメインだとうまくいかない方法なのであしからず・・・。

まずはみんな大好き、colorbox。

colorbox
http://www.jacklmoore.com/colorbox/

そしてスクリプト

$(".iframe").colorbox({iframe:true, innerWidth:500}, function(){
  //iframeをloadさせる
  $('#cboxLoadedContent').children('iframe').load(function(e){
    var iframeContSizeHeight = new Array(0);
    try {
      //iframe内のdivのサイズを片っ端から入れてく
      $(this).contents().find('body').find('div,section').each(function(index, el) {
        iframeContSizeHeight.push($(el).outerHeight());
      });
    }
    catch (eTry) {
      //iframe内ドキュメント取得不可の場合
      iframeContSizeHeight.push(400);
    }

    var maxHeight = Math.max.apply(null, iframeContSizeHeight); //取得サイズから一番でかい数値を格納
    //windowサイズ取得
    var parentW = $(window).width();
    var parentH = $(window).height();

    var cboxWidth = $('#colorbox').width(); //ライトボックスの動的な横幅を取得
    var left = parentW / 2 - cboxWidth / 2; //親の横幅／2　-　ライトボックス横幅／2をして、横の余白を算出
    var dt = parseInt($('#colorbox').css('top')); //ライトボックスに動的に入った「top」の値を取得
    var pL = dt - (maxHeight / 2); //動的なtopの値からライトボックスの高さの半分を引く
    if(pL <= 0){ pL = 0;} //引いた値が0以下なら、0を割り当てる
					
    //各DOMの初期高さから、差分を算出
    var loadedContentH = $('#cboxLoadedContent').outerHeight();

    var difWrapper = $('#cboxWrapper').outerHeight() - loadedContentH,
      difBox = $('#colorbox').outerHeight() - loadedContentH,
      difSide = $('#cboxMiddleLeft').outerHeight() - loadedContentH,
      difContents = $('#cboxContent').outerHeight() - loadedContentH;

    //colorboxのラッパーに大きさと位置割り当て
    $('#colorbox').animate({
      height: maxHeight + difBox,
      top: pL,
      left: left
    }, 400);

    //colorboxで生成された各DOMにサイズを入れていく
    $("#cboxWrapper").stop().animate({height: maxHeight + difWrapper}, 500);
    $("#cboxMiddleLeft").stop().animate({height: maxHeight + difSide}, 500);
    $("#cboxContent").stop().animate({height: maxHeight + difContents}, 500);
    $("#cboxLoadedContent").stop().animate({height: maxHeight}, 500);
    $("#cboxLoadedContent iframe").stop().animate({height: maxHeight}, 500);
    $("#cboxMiddleRight").stop().animate({height: maxHeight + difSide}, 500);
  });
});

とまぁこんな感じでいける。

みていただければわかる通り、colorboxさん、表示後のコールバック関数を定義できるのだ。

$("せれくたー").colorbox({
  //オプション
}, function(){
  //コールバック処理
});

なので、表示後に大きさとかを計算し、入れ直してるってわけ。
さすがcolorbox。

前回の方法より改善させた部分として大きいのは、
親ページからの処理のみで完結してるところ。
これなら子ページにわざわざ処理を書かなくてもオーケー。

ただ、やっぱり、クロスドメインだと値が取ってこれないのが痛い・・・。
（tryでごまかしてる）
クロスドメインでも、AJAXできるプラグインありますが、
クロスドメインだと、iframeのload後のcontents()メソッドが動かない・・・。
そして、子ページHTML内に、divもsectionもなかったら当然うまくいきません。
さすがにそんなHTML書く人いないとは思うけど。

ここまで書いといてなんですが、
今だったらcolorbox使わんで自分でプラグイン書いちゃうけどねｗ
前回より進歩してるってこった、地味にこの業界長いんだよな俺。

今日は早く寝る。