postMessageの使い方｜iframe・別ウィンドウ間の送受信【JavaScript入門】

targetWindow.postMessage(
  { type: "greeting", text: "こんにちは" },
  "https://example.com"
);

window.addEventListener("message", (event) => {
  if (event.origin !== "https://example.com") return;

  const data = event.data;
  if (data === null || typeof data !== "object") return;
  if (data.type !== "greeting" || typeof data.text !== "string") return;

  // 確認した内容を使う
});

parent/
  index.html
child/
  index.html

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>親ページ</title>
<h1>親ページ</h1>
<button id="send-to-child">中のページへ送る</button>
<p id="parent-result">ここに受信内容が表示されます。</p>
<iframe id="child-frame" title="中のページ"
  src="http://localhost:8001/index.html"></iframe>

<script>
const CHILD_ORIGIN = "http://localhost:8001";
const frame = document.getElementById("child-frame");
const result = document.getElementById("parent-result");

document.getElementById("send-to-child").addEventListener("click", () => {
  frame.contentWindow.postMessage(
    { type: "greeting", text: "親ページから届きました" },
    CHILD_ORIGIN
  );
});

window.addEventListener("message", (event) => {
  if (event.origin !== CHILD_ORIGIN) return;
  if (event.source !== frame.contentWindow) return;

  const data = event.data;
  if (data === null || typeof data !== "object") return;
  if (data.type !== "greeting" || typeof data.text !== "string") return;

  result.textContent = "受信：" + data.text;
});
</script>
</html>

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>中のページ</title>
<h2>iframeの中のページ</h2>
<button id="send-to-parent">親ページへ送る</button>
<p id="child-result">ここに受信内容が表示されます。</p>

<script>
const PARENT_ORIGIN = "http://localhost:8000";
const result = document.getElementById("child-result");

document.getElementById("send-to-parent").addEventListener("click", () => {
  window.parent.postMessage(
    { type: "greeting", text: "中のページから届きました" },
    PARENT_ORIGIN
  );
});

window.addEventListener("message", (event) => {
  if (event.origin !== PARENT_ORIGIN) return;
  if (event.source !== window.parent) return;

  const data = event.data;
  if (data === null || typeof data !== "object") return;
  if (data.type !== "greeting" || typeof data.text !== "string") return;

  result.textContent = "受信：" + data.text;
});
</script>
</html>

# Windows
py -m http.server 8000 --directory parent

# macOS / Linux
python3 -m http.server 8000 --directory parent

# Windows
py -m http.server 8001 --directory child

# macOS / Linux
python3 -m http.server 8001 --directory child

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>別ウィンドウ送受信の親ページ</title>
<h1>親ページ</h1>
<button id="open-popup">別ウィンドウを開く</button>
<button id="send-to-popup" disabled>別ウィンドウへ送る</button>
<p id="parent-result">別ウィンドウの準備ができると、ここに表示されます。</p>

<script>
const POPUP_ORIGIN = "http://localhost:8001";
let popupWindow = null;
let popupReady = false;

const result = document.getElementById("parent-result");
const sendButton = document.getElementById("send-to-popup");

document.getElementById("open-popup").addEventListener("click", () => {
  popupWindow = window.open(
    "http://localhost:8001/popup.html",
    "postMessagePopup",
    "width=600,height=400"
  );

  if (popupWindow === null) {
    result.textContent = "別ウィンドウを開けませんでした。ブラウザーの設定を確認してください。";
  }
});

window.addEventListener("message", (event) => {
  if (event.origin !== POPUP_ORIGIN) return;
  if (event.source !== popupWindow) return;

  const data = event.data;
  if (data === null || typeof data !== "object") return;

  if (data.type === "ready") {
    popupReady = true;
    sendButton.disabled = false;
    result.textContent = "別ウィンドウの準備ができました。";
    return;
  }

  if (data.type !== "greeting" || typeof data.text !== "string") return;
  result.textContent = "受信：" + data.text;
});

sendButton.addEventListener("click", () => {
  if (popupWindow === null || popupWindow.closed || !popupReady) return;

  popupWindow.postMessage(
    { type: "greeting", text: "親ページから届きました" },
    POPUP_ORIGIN
  );
});
</script>
</html>

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>別ウィンドウ</title>
<h1>別ウィンドウ</h1>
<button id="send-to-parent">親ページへ送る</button>
<p id="popup-result">ここに受信内容が表示されます。</p>

<script>
const PARENT_ORIGIN = "http://localhost:8000";
const result = document.getElementById("popup-result");

window.addEventListener("message", (event) => {
  if (event.origin !== PARENT_ORIGIN) return;
  if (event.source !== window.opener) return;

  const data = event.data;
  if (data === null || typeof data !== "object") return;
  if (data.type !== "greeting" || typeof data.text !== "string") return;

  result.textContent = "受信：" + data.text;
});

window.addEventListener("load", () => {
  if (window.opener === null) return;

  window.opener.postMessage(
    { type: "ready" },
    PARENT_ORIGIN
  );
});

document.getElementById("send-to-parent").addEventListener("click", () => {
  if (window.opener === null) return;

  window.opener.postMessage(
    { type: "greeting", text: "別ウィンドウから届きました" },
    PARENT_ORIGIN
  );
});
</script>
</html>

親ページ：受信：別ウィンドウから届きました
別ウィンドウ：受信：親ページから届きました