サンプル
以下のサンプルでは、http://localhost/messaging_sample1_1.html と http://localhost:8080/messaging_sample1_2.html とでやり取りをしている想定になっています。
オリジン、ファイル名は実際のものに合わせてください。同一オリジンのファイル同士で試した場合でも動作は変わりません。
また、Google Chromeではセキュリティ上、ローカルのHTMLファイルから他のローカルファイルの内容にアクセスする場合には、
ファイル読み込み自体を許可する「--allow-file-access」フラグと、
ローカルファイルからのファイル読み込みを許可する「--allow-file-access-from-files」フラグの両方を付けて起動する必要があります。
そのため、サンプルをローカルファイルとして実行する場合は、Google Chromeについては上記フラグを付けて起動したうえで実行してください。
Windowsの場合は以下のようになります。
＜Google Chromeのインストールフォルダ＞\chrome.exe --allow-file-access --allow-file-access-from-files
サンプル
インラインフレーム呼び出し側 http://localhost/messaging_sample1_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#target_iframe{
width:500px;
height:200px;
}
</style>
<title>サンプル</title>
</head>
<body>
<div>
フレーム内のドキュメントの背景色が指定したものに変わります。
<select name="color" id="colorSelect">
<option value="white"> 白色 </option>
<option value="red"> 赤色 </option>
<option value="blue"> 青色 </option>
<option value="yellow"> 黄色 </option>
<option value="green"> 緑色 </option>
</select>
</div>
<div><iframe src="http://localhost:8080/messaging_sample1_2.html" id="target_iframe"></iframe></div>
<p id="output"></p>
<script type="text/javascript">
// HTML要素の参照を取得
var iframe = document.getElementById("target_iframe");
var output = document.getElementById("output");
var select = document.getElementById("colorSelect");
select.onchange = function(event){
// 変更されるたびに、選択された背景色をフレーム内のドキュメントへ送信
iframe.contentWindow.postMessage(select.value,"http://localhost:8080");
}
// メッセージ受信イベント
window.onmessage = function(event){
// 送信元のオリジンを確認
if(event.origin == "http://localhost:8080"){
// 返信されてきたメッセージを表示
output.innerHTML = event.data;
}
}
</script>
</body>
</html>
インラインフレーム内 http://localhost:8080/messaging_sample1_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル インラインフレーム内のドキュメント</title>
</head>
<body>
<div id="output">iframe内のドキュメントです。</div>
<script type="text/javascript">
// body要素を取得
var body = document.getElementsByTagName('BODY')[0];
// メッセージ受信イベント
window.onmessage = function(event){
// 送信元のオリジンを確認
if(event.origin == "http://localhost"){
// クロスドキュメントメッセージングで送られてきた背景色をbodyに設定
body.style.backgroundColor = event.data;
// 送信元にメッセージを返信
event.source.postMessage("背景色を" + event.data + "に変更しました",event.origin);
}
}
</script>
</body>
</html>
関連項目
