JavaScript 異なるオリジンのインラインフレームにメッセージを送信する
インラインフレームにメッセージを送信するには、「postMessage()」メソッドを使います。postMessage()メソッドを使うと、異なるオリジン（プロトコル+ドメイン+ポート番号）に対してデータを送信することができます。postMessage()メソッドの最初のパラメータには、送信するデータを指定します。特に指定する必要がない場合は「”*”」とします。postMessage()メソッドでデータを送信した場合、受信側のインラインフレームではmessageイベントが発生します。onmessageプロパティにイベントハンドラを設定するか、addEventListenerメソッドを使ってイベントリスナーを設定します。イベントハンドラには、イベントオブジェクトが渡されます。イベントオブジェクトのdataプロパティに、受信したデータが入っています。また、受信したデータがどこのオリジンのものか確認するには、イベントオブジェクトの「origin」プロパティを参照します。
メインHTMLファイル
<body>
<script>
window.addEventListener("load",sendDateTime, false);
function sendDateTime(){
var targetFrame = document.getElementById("clock");
var dateTime = (new Date()).toString();
var targetOrigin = "*";
targetFrame.contentWindow.postMessage(dateTime, targetOrigin);
setTimeout(arguments.callee,1000);
}
</script>
<h1>クロスドキュメントメッセージ</h1>
<div>iframeに1秒ごとに日付情報を送信</div>
<iframe id="clock" src="test5.html" width ="360" height="100"></iframe>
<output></output>
</body>iframeHTMLファイル
<body>
<script>
window.addEventListener("message",function(evt){
var ele = document.getElementsByTagName("output");
//受信したメッセージを画面に出力
ele[0].innerText = ele[0].textContent = evt.data;
//送信元のオリジンを画面に出力
ele[1].innerText = ele[1].textContent = evt.origin;
}, false);
</script>
<h4>受信メッセージ</h4>
<div>受信データ<output></output></div>
<div>送信元オリジン<output></output></div>
</body>ブラウザで送信側のメインHTMLファイルを表示すると、異なるオリジンにあるインラインフレームにメッセージを送信します。受信側では、送信されたデータをページ上に表示します。
