[JavaScript] postMessageでクロスドメインメッセージ通信

原則、JavaScriptでは異なるドメイン間のAjax通信はできません。つまり、自サイトから他サイトのデータを取得することはできません。

HTML5では、異なるドメイン間でも安全にデータをやり取りできるよう、postMessage が用意されました。（両ドメインのサイトが postMessage を実装している必要があります）

コード例

基準サイトから外部サイトへメッセージを投げて、返信を受け取る場合のコード例です。外部サイトの window オブジェクトを必要とするため、iframe と併用されることが多いようです。

＜基準サイト側＞

基準サイト.html（抜粋）

<!-- 外部サイトへメッセージを投げるためのiframe -->
<iframe id="ifrm" src="http://外部サイト.com/xxx.html" style="display:none;"></iframe>

<script type="text/javascript">
// windowロードイベント
window.onload = function() {
    // iframeのwindowオブジェクトを取得
    var ifrm = document.getElementById('ifrm').contentWindow;
    // 外部サイトにメッセージを投げる
    ifrm.postMessage("HELLO!", 'http://外部サイト.com');
};

// メッセージ受信イベント
window.addEventListener('message', function(event) {
    alert(event.data); //'WORLD!'
}, false);
</script>

＜外部サイト側＞

外部サイトのxxx.html（抜粋）

<script type="text/javascript">
// メッセージ受信イベント
window.addEventListener('message', function(event) {
    // メッセージ送信元のサイトに返答する
    event.source.postMessage('WORLD!', event.origin);
}, false);
</script>

(･o･ゞ いじょー。

参考URL

▼Web Messaging API を使ってみる
http://qiita.com/naoiwata/items/0a31d999b2dcd5098289

▼postMessageとiframeでクロスドメインメッセージを送受信してみる
http://zafiel.wingall.com/archives/6631

▼クロスドメインで同じlocalStorageを使うテクニック
http://news.mynavi.jp/articles/2010/09/09/localstrage-on-many-domains/

▼PostMessageを使ったクロスドメイン通信によるメッセージの送受信とは？
http://the-zombis.sakura.ne.jp/wp/blog/2013/10/15/post-2031/

▼第3回　localStorageとpostMessageの使いどころ（2）
https://gihyo.jp/dev/serial/01/front-end_web/000302

▼JavaScriptでブラウザ上クロスドメイン通信のための手段
http://d.hatena.ne.jp/TipsMemo+computer-technology/20140401/p3