initial commit

1 files changed, 144 insertions, 0 deletions

diff --git a/files/ja/web/api/messageport/onmessage/index.html b/files/ja/web/api/messageport/onmessage/index.html
new file mode 100644
index 0000000000..81de5888cd
--- /dev/null
+++ b/files/ja/web/api/messageport/onmessage/index.html
@@ -0,0 +1,144 @@
+---
+title: MessagePort.onmessage
+slug: Web/API/MessagePort/onmessage
+tags:
+  - API
+  - Channel messaging
+  - MessagePort
+  - Property
+  - Reference
+translation_of: Web/API/MessagePort/onmessage
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>{{domxref("MessagePort")}} インターフェイスの <code><strong>onmessage</strong></code> イベントハンドラは、{{domxref("EventListener")}} であり、ポート上で <code>message</code> 型の {{domxref("MessageEvent")}} が発動した時に呼び出されます。つまり、ポートがメッセージを受信した時に呼び出されます。
+</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">channel.onmessage = function() { ... };</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次のコードブロックには、{{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} コンストラクタで作成された新しいチャンネルがあります。IFrame が読み込まれた時、{{domxref("MessagePort.postMessage")}} を使用してメッセージと {{domxref("MessageChannel.port2")}} が IFrame へ渡されます。すると、<code>handleMessage</code> ハンドラが <code>onmessage</code> によって IFrame から返されたメッセージに応答し、そのメッセージを段落に出力します。ここで、{{domxref("MessageChannel.port1")}} は、メッセージが到着したときに確認するための待機状態にあります。</p>
+
+<pre class="brush: js">var channel = new MessageChannel();
+var para = document.querySelector('p');
+
+var ifr = document.querySelector('iframe');
+var otherWindow = ifr.contentWindow;
+
+ifr.addEventListener("load", iframeLoaded, false);
+
+function iframeLoaded() {
+  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+channel.port1.onmessage = handleMessage;
+function handleMessage(e) {
+  para.innerHTML = e.data;
+}   </pre>
+
+<p>完全に動作する例は、Github 上の <a class="external external-icon" href="https://github.com/mdn/channel-messaging-basic-demo">チャンネルメッセージ送信の基本デモ</a> を見てください (<a class="external external-icon" href="http://mdn.github.io/channel-messaging-basic-demo/">実際の動作も確認できます</a>)。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-messageport-onmessage','onmessage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName("HTML5 Web Messaging")}} との差異なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web Messaging', '#handler-messageport-onmessage','onmessage')}}</td>
+   <td>{{Spec2('HTML5 Web Messaging')}}</td>
+   <td>仕様の W3C バージョン。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Worker 内で利用可能</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Worker 内で利用可能</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+</ul>