IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
HTML5 JavaScript API
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > HTML5 JavaScript API > Web Messagingの使い方 > Web Messagingとは
  カテゴリ別さくいん

Web Messagingとは

Web Messagingとは

対応ブラウザ

  • IE 9:○(チャネルメッセージング未実装)
  • FireFox 9.0:○(チャネルメッセージング未実装)
  • Opera 11.60:○
  • Chrome 16.0:○
  • Safari 5.1:○

Windows 7上で動作確認を行っています。
ブラウザの設定より、異なる挙動をする場合があります。
ブラウザWeb Messaging自体が実装されている場合に「○」としています。個々のメソッド属性などについては未実装である場合があります。

解説

コードによるほかのウィンドウ、タブ、フレームへのアクセスは、通常、セキュリティ上の理由から、同一オリジンのドキュメントの間だけに制限されています。

ここでいうオリジン(origin 生成元)というのは、ドキュメントURLのうち、スキーム、ドメイン、ポートを合わせた部分のことです。

以下のようなURLならhttp://example.com:8080の部分がオリジンで、a.htmlとb.htmlはオリジンが同一であるということになります。

http://www.example.com:8080/path/to/the/file/a.html
http://www.example.com:8080/path/to/b.html
スキームドメインポートパス
オリジンパス

しかし、オリジンは異なっているものの、信用できる特定のドキュメントと、一定のメッセージのやり取りを行う必要があるという場合も存在します。

この問題を解決するために、Web Messagingには、クロスドキュメントメッセージングとチャネルメッセージングの二つのAPIが用意されています。

クロスドキュメントメッセージングは、この異なるオリジンの間での通信を安全に行うことを目的としたAPIで、そのために、メッセージの送受信を専用のメソッドイベントだけに限定し、送受信時に相手先のオリジンを確認できるようになっています。

クロスドキュメントメッセージングは、基本的には「window.postMessage(message, targetOrigin)」メソッドwindowmessageイベントセットで利用します。

送信元のドキュメントで、送信先のドキュメントwindowオブジェクトの「postMessage(message, targetOrigin)」メソッドを呼び出すと、送信先ドキュメントで、windowオブジェクトmessageイベントが発生してデータが受信されます。

以下は送信と受信のシンプルな例です。

http://abc.example.com/a.htmlコード

// 「iframe」はhttps://efg.example.org/b.htmlを
// 表示しているiframe要素への参照
iframe.contentWindow.postMessage('送信メッセージ','https://efg.example.org');

https://efg.example.org/b.htmlコード

// messageイベントをハンドリングする
window.onmessage = function(event){
   // 送信元のオリジンを確認
   if(event.origin == 'http://abc.example.com'){
        // 送信されたデータの取出し
        console.log(event.data);
   }
}

これに対し、チャネルメッセージングは、データの送受信をwindow単位で行うのではなく、任意の個数の生成が可能な、MessageChannelオブジェクトを使用して行います。チャネルメッセージングを使うと、同時に複数の通信チャンネルを使った通信を行うことができます。

MessageChannelオブジェクトには属性port1と属性port2が存在し、実体はMessagePortオブジェクトになっています。このport1とport2が、MessageChannelを一つの通信チャンネルとした場合の、両端の通信端末に相当します。

以下の例では、同一のウィンドウの中のコード通信チャンネルを生成し、チャンネルの一方の端(port2)からもう一方の端(port1)へメッセージを送っています。

また、一つのMessageChannelのport1とport2のどちらか一方のMessagePortオブジェクトを、クロスドキュメントメッセージングを利用してオリジンの異なるウィンドウに送信すれば、ウィンドウをまたいで存在するport1とport2の間で通信することで、異なるオリジンの間での通信を実現することができます。

// チャンネルを生成
var channel = new MessageChannel();
// このチャンネルの端末1を開始する
channel.port1.start();
// このチャンネルの端末2を開始する
channel.port2.start();
// 端末1の受信ハンドラを定義する
port1.onmessage = function(event){
    console.log(event.data);
}
// 端末2からメッセージを端末1に送信する
port2.postMessage('送信データ');

関連項目

関連する項目はありません)



シャープのマスクシャープのマスク
シャープが製造・販売する不織布マスク。
Surface Book 3Surface Book 3
Microsoftが販売するデタッチャブルPC。
Surface Go 2Surface Go 2
Microsoftが発表した2in1 PC。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2024年3月19日現在
ランキング1   ICT (用語辞典)
ランキング2   AirDrop (用語辞典)
ランキング3   コンテキスト  (用語辞典)
ランキング4   セグメント  (用語辞典)
ランキング5   アノテーション  (用語辞典)
ランキング6   オムニチャネル  (用語辞典)
ランキング7   スワイプ  (用語辞典)
ランキング8   インスタンス化  (用語辞典)
ランキング9   カラム  (用語辞典)
ランキング10   FOMO  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについて運営会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2023 GRAS Group, Inc. All rights reserved.