LoginSignup
168

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-06-04

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
168