Zenn
Open2

iframeとWindow.postMessage()を使ってオリジン間通信

JavaScript
npm
Web
Node.js
aonoaono

通信のイメージ

localhost側のコード【送信】

post.html
<iframe
  src="http://site.example:3000/reply.html"
  onload="iframeLoaded()"
></iframe>

<script>
  function iframeLoaded() {
    const frame = document.querySelector("iframe");
    frame.contentWindow.postMessage("Hello, Alice", frame.src);
  }
  window.addEventListener("message", (event) => {
    if (event.origin !== "http://site.example:3000") {
      return;
    }
    console.log(event.data);
  });
</script>

site.example側のコード【受信と返信】

reply.html
<script>
  window.addEventListener("message", (event) => {
    if (event.origin !== "http://localhost:3000") {
      return;
    }
    event.source.postMessage("Hello, Bob", event.origin);
  });
</script>

↓
localhost:3000/post.htmlを開くと、site.example/reply.htmlから送られてきたHello, Bobがコンソールに出力される