クロスドメイン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, '*');
});
