クロスドメインiframeの高さを自動設定

iframeで呼び出すクロスドメインのHTMLの高さを取得しiframeでの高さを自動調整

親 example.com

jQuery

$(function () { // ifrme存在チェック if ($('iframe')[0]) { $(window).on('message', function(e) { // 制限 if (e.originalEvent.origin !== 'http://example.jp') { return; } // iframeの高さを取得 var iframe_height = e.originalEvent.data; // iframeに高さを設定 $('iframe').css('height', iframe_height + 'px'); }); }); } });

子 example.jp(iframe)

jQuery

$(function () { // iframe自身の高さを取得 var self_height = $('body').outerHeight(true); // iframeに高さを通知 parent.postMessage(self_height, '*'); });

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について