MENU

jQueryで同一ドメインまたはクロスドメインなiframeの高さを自動調整する

iframeの高さを自動調整する便利な方法を紹介します。今回は同一ドメインとクロスドメインに分けて紹介していきます。

同一ドメイン

parent.html


<!DOCTYPE html>
<html lang="ja">
<head>
  
  http://基準サイト.com/parent.html
</head>
<body>


<iframe class="child-iframe" src="http://外部サイト.com/iframe.html"></iframe>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function()
{

// iframeがロードされたとき
$('.child-iframe').on('load', function()
{
  try 
  {
    // iframeの高さ
    var height = $(this)[0].contentWindow.$('html').height();
    $(this).css(
    {
      'width': '100%',
      'height': height
    });
  }
  catch (error)
  {
    
  }
})
.trigger('load');

});
</script>
</body>
</html>

iframe.html


<!DOCTYPE html>
<html lang="ja">
<head>
  
  http://外部サイト.com/iframe.html
</head>
<body>

sample
sample
sample
sample
sample
sample
sample

sample
sample
sample
sample
sample
sample
sample

sample
sample
sample
sample
sample
sample
sample


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function()
{



});
</script>
</body>
</html>

jQueryで同一ドメインまたはクロスドメインなiframeの高さを自動調整する

クロスドメイン

parent.html


<!DOCTYPE html>
<html lang="ja">
<head>
  
  http://基準サイト.com/parent.html
</head>
<body>


<iframe class="child-iframe" src="http://外部サイト.com/iframe.html"></iframe>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function()
{

// メッセージを受信したとき
$(window).on('message', function(event)
{
  // クロスサイトリクエストフォージェリ対策（送信元の検証）
  if (event.originalEvent.origin != 'http://外部サイト.com') return;
  
  // 受信した高さをiframeに設定
  $('.child-iframe').css(
  {
    'width': '100%',
    'height': event.originalEvent.data
  });
});


});
</script>
</body>
</html>

iframe.html


<!DOCTYPE html>
<html lang="ja">
<head>
  
  http://外部サイト.com/iframe.html
</head>
<body>

sample
sample
sample
sample
sample
sample
sample

sample
sample
sample
sample
sample
sample
sample

sample
sample
sample
sample
sample
sample
sample


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function()
{

// iframeの高さ
var height = $(document).height();

// 親へiframeの高さを送信
// postMessage(<送信する値>, <送信先のドメイン>)
window.parent.postMessage(height, 'http://基準サイト.com');

});
</script>
</body>
</html>

jQueryでpostMessage()を使ってクロスドメインな親と子iframeの間で値を送受信する

この記事で紹介した postMessage() を使っています。