postMessage を利用した別のHTMLページへのメッセージ送信 - JavaScript

JavaScriptのpostMessageメソッドを利用して、別のHTMLページへメッセージを送信するコードを紹介します。

概要

送信先のウィンドウオブジェクトを取得し、postMessage()メソッドを呼び出すことで、メッセージを別のページに送信できます。受信側では、メッセージが通知されると"message"イベントが発生しますので、イベントハンドラを実装しメッセージを受け取ります。

プログラム１：インラインフレーム内ページへのメッセージ送信

コード

下記のコードを追加します。

SimplePostMessage.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">

    function onButtonClick(e) {
      if (e.preventDefault) e.preventDefault();
      var win = document.getElementById("iframe").contentWindow;
      win.postMessage(document.getElementById("Text1").value, "http://localhost:60132");
      e.returnValue = false;
      return false;
    }
    function PageLoad() {
      document.getElementById("Button1").addEventListener("click", onButtonClick, false);
    }

  </script>
</head>
<body onload="PageLoad();">
  <iframe id="iframe" src="SimplePostMessageTarget.html"></iframe>
  <br/>
  <input id="Text1" type="text" /><br/>
  <input id="Button1" type="button" value="button" /><br />
</body>
</html>

SimplePostMessageTarget.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">

  function onMessage(e) {
    if (e.origin !== "http://localhost:60132") {
      document.getElementById("output").innerHTML = 'メッセージを無視: ' + e.origin;
    } else {
      document.getElementById("output").innerHTML = e.origin + " から受信: " + e.data;
    }
  }

  window.addEventListener("message", onMessage, false);
  </script>
</head>
<body>
  <p>メッセージ</p>
  <div id="output"></div>
</body>
</html>

解説

SimplePostMessage.html がメッセージ送信側のHTML、SimplePostMessageTarget.html がメッセージ受信側のHTMLです。SimplePostMessage.html ページのテキストボックスに送信メッセージを入力し、ボタンをクリックすると、clickイベントハンドラが実行されます。最初に、インラインフレームのIDからインラインフレームのオブジェクトを取得します。インラインフレームのオブジェクトのcontentWindow プロパティを取得し、インラインフレーム内のページのウィンドウオブジェクトを取得します。
取得したウィンドウオブジェクトのpostMessage() メソッドを呼び出し、テキストボックスに入力された文字列を送信します。postMessageメソッドの第二引数には、このページが配置されるホスト名を与えます。

受信側の SimplePostMessageTarget.html では、"message" イベントハンドラを登録します。メッセージを受信したタイミングで、イベントハンドラが実行され、onMessage() 関数が呼び出されます。イベントハンドラの第一引数のorigin を確認し、送信者をチェックします。送信者が一致した場合に、受信したメッセージを画面に表示します。

実行結果

上記の SimplePostMessage.html ファイルをWebブラウザで表示します。下図の画面が表示されます。ページ上部のインラインフレームにSimplePostMessageTarget.html が表示されています。

画面下部のテキストボックスに送信するメッセージを入力します。入力後[button]ボタンをクリックします。

メッセージが SimplePostMessageTarget.html に送信され、インラインフレーム内のページに受信したメッセージが表示されます。

プログラム２：別ウィンドウのページへのメッセージ送信

先の例では、インラインフレーム内のページにメッセージを送信しましたが、別のウィンドウのページにメッセージを送信することもできます。

コード

下記のコードを記述します。

NewWindowPostMessage.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    var wnd;

    function onButtonClick(e) {
      wnd.postMessage(document.getElementById("Text1").value, "http://localhost:60132");
      return false;
    }

    function onLinkClick() {
      wnd = window.open('NewWindowPostMessageTarget.html', '_blank');
    }
  </script>
</head>
<body>
  <a href="#" onclick="onLinkClick();">ウィンドウ表示</a>
  <hr />
  <input id="Text1" type="text" /><br />
  <input id="Button1" type="button" value="button" onclick="onButtonClick();" /><br />
</body>
</html>

NewWindowPostMessageTarget.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    function onMessage(e) {
      if (e.origin !== "http://localhost:60132") {
        document.getElementById("output").innerHTML = 'メッセージを無視: ' + e.origin;
      } else {
        document.getElementById("output").innerHTML = e.origin + " から受信: " + e.data;
      }
    }

    window.addEventListener("message", onMessage, false);
  </script>
</head>
<body>
  <p>メッセージ</p>
  <div id="output"></div>
</body>
</html>

解説

NewWindowPostMessage.html が送信側ページ、NewWindowPostMessageTarget.html が受信側ページになります。NewWindowPostMessage.html の[ウィンドウ表示]リンクをクリックすると、JavaScriptのwindow.open()メソッドを呼び出し、新しいウィンドウでNewWindowPostMessageTarget.html ページを開きます。window.open()メソッドの戻り値は開いたウィンドウオブジェクトになりますので、その値を格納しておき、postMessage() メソッドを呼び出すことで、新しく開いた先のウィンドウにメッセージを送信できます。
受信側は先のコードと同様に、message イベントのイベントハンドラを登録し、メッセージの受信をします。