グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

※14/10/8　追記
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。

ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。


よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。

ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。

jQuery and Fancybox: How to automatically set the height of an iframe lightbox

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
});

上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。

$("#sample").fancybox({
  'width' : 500,
  'type' : 'iframe',
  'scrolling' : 'no',
  'onComplete' : function() {
    $('#fancybox-frame').load(function() {
      $('#fancybox-content').height($(this).contents().find('body').height());
      $('#fancybox-overlay').height($(document).height());
    });
  }
});

これで高さが自動調整されます。
google chromeだとローカルでは動きません。

※12/7/11　追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。

不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。

また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。

ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・

時間があるときにいじってみたいです。