JavaScript
HTML5

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

More than 1 year has passed since last update.

原則、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