コイケアキヨシ blog: HTML5のpostMessageを使ってみた

HTML内にあるiframeに対してメッセージを送信することができます。
まずはmain.htmlとframe.htmlのサンプルを見てください！

実際の画面はサンプルを見てください。

■サンプル
-main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メッセージングのサンプル</title>
<script type="text/javascript">
var MYORIGIN = location.protocol + "//" + location.host;
function init() {
var iframe = document.getElementsByTagName("iframe")[0];
setInterval(function() {
var date = new Date();
var dateStr =
date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() +
" " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
var number = Math.floor(Math.random() * 100);
var json = '{date: "' + dateStr + '", number: "' + number + '"}';
iframe.contentWindow.postMessage(json , MYORIGIN);
document.getElementById("msg").innerHTML = dateStr + "," + number;
}, 1000);
}
</script>
<body onload="init()">
<div id="msg"></div>
<iframe src="frame.html" width="500" height="200"></iframe>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メッセージングのサンプル</title>
<script type="text/javascript">
var MYORIGIN = location.protocol + "//" + location.host;
function init() {
var iframe = document.getElementsByTagName("iframe")[0];
setInterval(function() {
var date = new Date();
var dateStr =
date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() +
" " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
var number = Math.floor(Math.random() * 100);
var json = '{date: "' + dateStr + '", number: "' + number + '"}';
iframe.contentWindow.postMessage(json , MYORIGIN);
document.getElementById("msg").innerHTML = dateStr + "," + number;
}, 1000);
}
</script>
<body onload="init()">
<div id="msg"></div>
<iframe src="frame.html" width="500" height="200"></iframe>
</body>
</html>

-frame.html

view plain print ?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var MYORIGIN = location.protocol + "//" + location.host;
window.addEventListener("message", function(e) {
var data = eval("(" + e.data + ")");
if(e.origin == MYORIGIN) {
document.body.innerHTML = data.date + "," + data.number;
}
}, false);
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var MYORIGIN = location.protocol + "//" + location.host;
window.addEventListener("message", function(e) {
var data = eval("(" + e.data + ")");
if(e.origin == MYORIGIN) {
document.body.innerHTML = data.date + "," + data.number;
}
}, false);
</script>
</head>
<body>
</body>
</html>

■解説
otherWindow.postMessage(message, targetOrigin);
-otherWindow
別ウィンドウへの参照。次のような参照が保持されます。例えば、iframe 要素のcontentWindow プロパティの利用、window.open によって返されるオブジェクト、あるいは、 window.frames における名前付きか数による添え字。
-message
送信したい文字列データ。
-targetOrigin
イベントが伝達されるべき otherWindow の生成元を "*" というリテラル文字列（指定しないことを示します）か URI のいずれかで指定します。もしイベントが targetOrigin で指定されたものにマッチしない otherWindow の文書のスキーマ、ホスト名、あるいは、ポートに伝達するようになっている場合、そのイベントは伝達されません。つまり、3 つすべてがマッチした場合にだけイベントが伝達されます。この仕組みはメッセージが送られる場所の制御を提供します。例えば、postMessage をパスワードを送るために利用する場合、悪意のある第三者によるパスワードの傍受を防ぐためにこの引数が意図されたパスワードを含むメッセージの受け手と同じ生成元である URI であることは絶対的に致命的なものになるでしょう。

ここで、今回はjson形式の物をframeに対して渡しています！
せっかくjson形式で渡しているのですが、postMessageで扱えるのは文字列だけです。
よって、受け取り側でも文字列として受け取ってしまいます。
なので今回は、evalを使い文字列からjson形式に変換しています。

コイケアキヨシ blog

2010年5月24日月曜日

HTML5のpostMessageを使ってみた

0 件のコメント:

コメントを投稿