JavaScript PostMessageでiframeとやりとりするには？

/ JavaScript / By
ショコラ
ショコラ

JavaScript PostMessageでiframeとやりとりするには？

子のiframe からは window.parent.postMessage を使います。
子のiframe には document.querySelector().contentWindow.postMessage を使います。
postMessage の書式は、postMessage(message, targetOrigin) で targetOrigin には「’*’」や「’https://〇〇〇’」を指定できますが、配列を渡すことで複数指定することができます。

もっさん先輩
もっさん先輩

子のiframe内から 親のindex.html にイベントを送る。

iframe.html

window.parent.postMessage で親ウィンドウにメッセージを送ります。

<html>
<body>
  <button type="button" onClick="window.parent.postMessage({event:'greeting',message:'Hello Answorz!'},'*')">postMessage</button>
</body>
</html>

親のindex.html

<html>
<body>
  <iframe src="iframe.html"></iframe>
<script>
window.addEventListener('message',ev => {
  // 送信元チェック
  if ('http://192.168.0.180' !== ev.origin)
    return
  // データチェック
  if ('greeting' === ev.data.event) {
    let div = document.createElement('div');
    div.innerHTML = ev.data.message;
    document.body.appendChild(div);
  }
})
</script>
</body>
</html>

親のindex.html から 子のiframe にイベントを送る。

親のindex.html

document.querySelector(｛iframeを指定｝).contentWindow.postMessage で iframe にメッセージを送ります。

<html>
<body>
  <iframe id="iframe" src="iframe.html"></iframe>
  <button type="button" onClick="document.querySelector('#iframe').contentWindow.postMessage({event:'greeting',message:'Hello Answorz!'},'*')">PostMessage</button>
</body>
</html>

iframe.html

<html>
<body>
<script>
window.addEventListener('message',ev => {
  // 送信元チェック
  if ('http://192.168.0.180' !== ev.origin)
    return
  // データチェック
  if ('greeting' === ev.data.event) {
    let div = document.createElement('div');
    div.innerHTML = ev.data.message;
    document.body.appendChild(div);
  }
})
</script>
</body>
</html>

以上

iframe の高さにリサイズする例

window.parent.postMessage で親ウィンドウにメッセージを送ります。

<html>
<script>
  window.onload = () => window.parent.postMessage('resize','*');
</script>
<body>
  子供
</body>
</html>

親のindex.html

<html>
<body>
  <iframe src="iframe.html" width="100%" scrolling="no" id="iframe"></iframe>

<script>
function resize() {
  const iframe = document.getElementById("sub");
  iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
window.addEventListener('message',() => resize());
window.addEventListener('resize',() => resize());
</script>

</script>
</body>
</html>

以上

Scroll to Top