Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

PostMessageを使ったクロスドメイン通信によるメッセージの送受信を試してみた!

      2015/07/18

JavaScriptでいろいろ実装していると時に別ウィンドウを開いて、呼び出し元のウィンドウとの間で通信をしたい時に立ちはだかるのがクロスドメイン問題です。

クロスドメイン自体は、異なるドメイン間をまたがったデータのやり取りする事なんですが、なんとhtml5から新たに使えるようになったpostMessageという機能がありまして、このpostMessageを使えば異なるドメイン間でのデータの通信ができるので今回はそのpostMessageの使い方を少し紹介したいと思っています。

Web Messagingとは?

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

クロスドメインとは、異なるドメイン間をまたがったデータに対してアクセスをすることを言うんですが、調べてみると異なるドメイン間でメッセージ送信が可能のようで、この異なるオリジンの間での通信を安全に行うことを目的としたAPIとして、postMessageとMEssageEventがあるようです。またMessageChannelという2つのポートを利用した送受信もあるようですが、それは追々時間があったときにでも

Web Messagingの流れと解説

さて、ここからが本題ですが、メッセージを送信・受信するにはhtml5のjavascript apiを利用します。

windowオブジェクトに用意されている「postMessage」というメソッドで送信して、windowオブジェクトの「onmessage」イベントが発生して受信する流れになります。

1:postMessageのよるメッセージを送信

targetWidow

targetWidowとは、適当に名前をつけましたが、別ウィンドウへの参照。例えば、iframe要素のcontentWindowプロパティの利用、window.open によって返されるオブジェクトなどがあたります。

オリジンについて

オリジンとは、ページはどこから持ってきたものかを示す情報ですが、ドキュメントのURLのスキーム・ドメイン・ポートを指します。

サンプルではこの「js do it」のサービスを利用させていただいてるのですが、オリジンには「http://jsrun.it」のドメインを指定しています。

2:MessageEventによるメッセージ受信

MessageEventには3つのプロパティがあります。そのプロパティはeventオブジェクトから参照します。

event.data

送信元のウィンドウから渡されるメッセージを保持しているオブジェクト

event.origin

メッセージを送る送信元であるウィンドウのorigin

event.source

メッセージを送った送信元のwindowオブジェクトへの参照。

サンプルのhtmlファイル

今回はとりあえず、メッセージの受信先のウィンドウを開いてそこにテキストフィールドに入力した内容を送信してみようと思う。

htmlファイルの構造で必要最低限の部分だけ抜き出してます。

送信元のhtmlファイル

各IDとその役割

sbtn メッセージの受信先となるウィンドウを開くボタン
message 送信するメッセージを記入するエリア
btn メッセージを送信するボタン

と、まぁいたって普通ですが、実際にサンプルを実行する際はまず、メッセージの受信先となるウィンドウを必ず先に開く必要がある。

これは後述しますが、javascriptで送信する際に、受信先のウィンドウオブジェクトを取得しておく必要があるからです。

受信先のhtmlファイル

サンプルのjavascriptファイル(送信元)

まずは、送信元となるファイルのjavascriptに関する説明。*ざっくりで申し訳ないのだが・・

1:各要素を取得

あまり説明も必要ないと思うが流れ上一応(笑) 各ボタンやテキストエリアなどを取得。

2:window.openで受信先のwindowオブジェクトを変数に保持する

となる、ファイルをwindow.openで開き、その受信先windowオブジェクトを変数popに代入しておく。

注意点として、受信先のwindowオブジェクトを取得しておかないと、postMessageメソッドが動作しないので先にwindow.openでウィンドウを開いて、windowオブジェクトを取得しておく必要がある。

3:テキストデータを取得してpostMessageで送信

テキストエリアに入力されたデータを取得して受信先のwindowオブジェクトよりpostMessageメソッドを呼び出して送信する。

サンプルのjavascriptファイル(受信先)

event.dataより受信データを取得する

event.dataに受信したテキストの内容が保存されているので、そのデータを受信先のdiv要素にinnerHTMLで表示しています。

参考サイト

今回は、ちょっと長くなったので下記にまとめました。

 - javascript , , ,

     

Message

  関連記事

JavaScriptで動画コンテンツを操作してみた!

前回、html5のvideoタグについて説明しました。 html5のvideoで …

javascriptのプロトタイプを調べる

前回、javascriptのクラスについて軽く書いたが今回は、prototype …

【javascript】マウスホイールで減速するイージングを試してみた

マウスホイールで減速するイージングを試してみた ちょっとjavascriptとj …

CSS3のアニメーションをjavascriptで実行する方法

よくCSS3でロールオーバーでアニメーションさせるのありますが、まぁそれは、普通 …

javascriptのプロトタイプを調べる -クラス編-

最近、jqueryに慣れまくってjavascriptでオブジェクト指向について調 …

【javascript】剰余(%)演算子を使って値が繰り返しループする処理をやってみた!

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証 …

no image
要素を追加する 

最近やたらとjQueryに頼って生きてます。jQueryだと要素の追加が簡単だが …

【JavaScript】配列をシャッフルして要素をランダムに入れ替える方法

JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどう …

【JavaScript】bodyに要素を追加

そういえばbody要素直下にデータを追加したい場合っていまさらながらメモる。 i …

html5のwebStorage(localStorage)でデータを保存する

さて最近、html5が当たり前になってきましたね♪それに伴って新しい機能が追加さ …