TIESのブログ

異なるドメイン間でスクリプト処理させたい

CHiLO Book オンライン版(改良版)を進めていく中、この前、FacebookやGoogleなどの認証問題の対応をしましたが、
今度は、別ドメインにあるスクリプト処理の問題を対応することになりました。

やりたいこととして、参照するiframe用のhtmlページとは別のサーバ(ドメイン)に、
CHiLOオンライン用のリーダを置いて、みんなそこへ見に行くようにしたいです。
ただ、ここでも認証の時と同様に、違うドメインだとスクリプト処理できないとブラウザに怒られました。

(図にするとこんな感じ?)
---
CHiLOオンライン用のリーダがあるサーバ(Aドメイン)

↑スクリプト処理実行してくれ(-人-;)   ↓違うドメインなのでスクリプト処理しない(乂=д=´)

iframe用のhtmlを置くサーバ(Bドメイン)
iframe用のhtmlを置くサーバ(Cドメイン)
iframe用のhtmlを置くサーバ(Dドメイン)
---
どうしようか調べていると、window.postMessage というのを使えば、違うドメインでも処理してくれそうなので試した所、動いてくれました。
(今回試した処理は、iframe外にあるBookに戻るエリアの表示・非表示をしたかった)
20151224_3

処理をざっくり書くと、今まで、Aドメイン上で

var hoge="blcok";
if(a){hoge="none";}
top.document.getElementById("id").style.display=hoge;

と書いていたのを、

Aドメインには判断に必要な情報をpostMessageで送るようにして、

var hoge="blcok";
if(a){hoge="none";}
top.postMessage(hoge,"*");

Bドメイン側で情報を受け取ってから処理するようにすると、動いてくれました。

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
var data = event.data;
document.getElementById("id").style.display=data;
}

とりあえず動いたので、色々な環境で動作確認してみます。。

異なるドメイン間でスクリプト処理させたい はコメントを受け付けていません