MENU

jQueryでiframeの親要素から子要素と子要素から親要素の操作・関数の実行

最近iframeを触ることも少なくなりましたが、まだまだ使う場面はありそうです。jQueryで親とiframeとの間でやりとりしたいときどうすればいいのか。意外と忘れてしまうので、まとめも兼ねて紹介したいと思います。

要素の操作

parent.htmlchild.htmlを作成していきます。

親からiframe内へ


<!DOCTYPE html>
<html lang="ja">
<head>
  
  parent.html
</head>
<body>





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

$('.button').on('click', function()
{
  $('.iframe-child').contents().find('.result').text($('.input').val());
});

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

<!DOCTYPE html>
<html lang="ja">
<head>
  
  child(iframe).html
</head>
<body>

親要素から送信されてきた値:

</body>
</html>

$(‘.iframe-child’).contents() で子要素(iframe)内にアクセスできます。

iframe内から親へ


<!DOCTYPE html>
<html lang="ja">
<head>
  
  parent.html
</head>
<body>


子要素(iframe)から送信されてきた値:

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  
  child(iframe).html
</head>
<body>




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

$('.button').on('click', function()
{
  $('.result', parent.document).text($('.input').val());
});

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

$(‘.result’, parent.document) のように第2引数parent.document を指定することで、親要素内にアクセスできます。

関数の実行

parent.htmlchild.htmlを作成していきます。

親からiframe内の関数


<!DOCTYPE html>
<html lang="ja">
<head>
  
  parent.html
</head>
<body>



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

$('.child-iframe').on('load', function()
{
  try 
  {
    $(this)[0].contentWindow.childFunc();
  }
  catch (error)
  {
    
  }
})
.trigger('load');

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

<!DOCTYPE html>
<html lang="ja">
<head>
  
  child(iframe).html
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function childFunc()
{
  alert('child(iframe).html内の関数です');
}

$(function()
{



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

$(‘.child-iframe’)[0].contentWindow.関数名() で子要素(iframe)内の関数にアクセスできます。

iframe内から親の関数


<!DOCTYPE html>
<html lang="ja">
<head>
  
  parent.html
</head>
<body>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function parentFunc()
{
  alert('parent.html内の関数です');
}

$(function()
{



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

<!DOCTYPE html>
<html lang="ja">
<head>
  
  child(iframe).html
</head>
<body>

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

window.parent.parentFunc();

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

window.parent.関数名() で親要素の関数にアクセスできます。