MENU

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

今回は親と子iframeとの間で値を送受信しますが、別にiframeでなくても通信できます。IE8から使えるので、ほぼすべてのブラウザで使えると思います。JSで postMessage() を使ったサンプルは多くありますが、jQueryのサンプルはなかったので紹介します。jQueryの場合は若干違う箇所が出てくるので注意が必要です。

親から子iframeへ送信

クロスドメイン環境を想定するので、http://基準サイト.com直下にparent.html、http://外部サイト.com直下にiframe.htmlを作ります。

parent.html


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





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

// ボタンがクリックされたとき
$('.btn').on('click', function()
{
  // iframe内へメッセージを送信
  // postMessage(<送信する値>, <送信先のドメイン>)
  $('.child-iframe')[0].contentWindow.postMessage('任意のメッセージ', 'http://外部サイト.com');
});

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

child.html


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

<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;
  
  // 受信したオブジェクトを表示
  console.log(event.originalEvent);
  
  // 受信したメッセージ自体を表示
  console.log(event.originalEvent.data);
});

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

子iframeから親へ送信

parent.html


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




<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;
  
  // 受信したオブジェクトを表示
  console.log(event.originalEvent);
  
  // 受信したメッセージ自体を表示
  console.log(event.originalEvent.data);
});


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

child.html


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



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

// ボタンがクリックされたとき
$('.btn').on('click', function()
{
  // 親へメッセージを送信
  // postMessage(<送信する値>, <送信先のドメイン>)
  window.parent.postMessage('任意のメッセージ', 'http://基準サイト.com');
});

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