HTML5 - Web Messaging

目次

Web Messagingとは

ウィンドウ間、フレーム間、オブジェクト間でメッセージを送受信する仕組みです。下記の仕様書が公開されています。

サンプル

下記の例では、JavaScript(test.js)を非同期に実行しています。test.js が postMessage で発行したメッセージを、呼び出し側が onmessage で受け取って画面に表示しています。

Google Chrome や Opera では、ローカルファイルでは動作しません。http: か https: で始まるURLでアクセスしてください。

test.html
<!DOCTYPE html>
<head>
<title>WebMessage TEST</title>
<script>
window.addEventListener("load", function() {
  var worker = new Worker('test.js');
  worker.onmessage = function(event) {
    document.getElementById('result').innerHTML = event.data;
  };
});
</script>
</head>
<body onload="init()">
<div id="result">
</div>
</body>
</html>
test.js
var count = 0;  
setInterval(function() {
    postMessage('hoge' + count++);
}, 1000);
Copyright (C) 2015 杜甫々
初版:2015年1月1日 最終更新:2015年1月1日
https://www.tohoho-web.com/html5/web_message.html