jQueryでiframeの親要素から子要素と子要素から親要素の操作・関数の実行
最近iframeを触ることも少なくなりましたが、まだまだ使う場面はありそうです。jQueryで親とiframeとの間でやりとりしたいときどうすればいいのか。意外と忘れてしまうので、まとめも兼ねて紹介したいと思います。
要素の操作
parent.htmlとchild.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.htmlとchild.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.関数名() で親要素の関数にアクセスできます。