みかづきブログ・カスタム

基本的にはちょちょいのほいです。

postMessageを使って別ドメインのiframeからメッセージを受け取る 📞

developer.mozilla.org

別ドメインのiframeを貼り付けたとき、iframeと通信できたらいいのになと思う瞬間があります。
例えば、iframe内の高さを親に伝えて、iframe自体の高さを変更したいときなどです。

そんなときに役に立つのが、window.postMesage
これを使えば、安全なクロスドメイン通信ができるともっぱら話題だったので試してみました。

iframe外(親)のJavaScript

window.addEventListener('message', function(evt) {
  console.log(evt);
});


iframe内(子)のJavaScript

window.parent.postMessage('Ya-Ha-!', '*');

ざっくり書くと、これでiframe内(子)からiframe外(親)にメッセージを送ることができます。
postMessageの第一引数('Ya-Ha-!')は送るメッセージで、今回はStringを送ってますが、当然ObjectやArrayを送ることもできます。
第二引数('*')はメッセージを受け取ることができるURLを指定できるのですが、今回はワイルドカードをつかって誰でも受け取れるようにしてみました。
セキュリティ的にはしっかりと指定した方が良いことはいうまでもありません。


DEMO