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

  関連記事

iframe 内のウィンドウから親ウィンドウの要素を操作するには!?

さて、ちょっと気になっていたiframeで読み込んだhtmlで実行したJavaS …

IE6・7・8でもHTML5のvideoを利用できる方法とは!?

さて、html5のvideoタグを利用して動画を再生させるのは簡単なんですが、た …

javascriptオブジェクトをJSONオブジェクトに返還

WebStorageで複数のデータを保存するときに、知ったのでメモる。 JSON …

読み込んだjsonファイルをjqueryでフィルタリング処理の練習

jsonファイルで、読み込んだ画像リストを表示するのは、まぁそんな難しくないけど …

html5でドラッグ&ドロップの処理

ドラッグ&ドロップって昔から使われてたらしいけど、とりあえず知っておこうと思って …

【JavaScript】送信ボタンのイベントをキャンセルさせる方法とは!?

フォームのsubmitボタンでクリックすると情報が送信されますが、その前に入力し …

html5のlocalStorageで複数のデータを保存するには?

以前、localStorageのデータを保存する方法について記事を書きましたが、 …

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

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

html5でドラッグ&ドロップでローカルからテキストファイルをアップロード

先日、ファイルの読み込みをやりましたが、今度はローカルからファイルを読み込む方法 …

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

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