2020年04月12日

iframeの中のコンテンツの要素やイベントを取得する方法(クロスドメイン対応編)

iframeの中のコンテンツの要素やイベントを取得する方法(クロスドメイン対応編)

お世話になっております。 SeekNextの佐藤です。
今回は先日公開していた「iframeの中のコンテンツの要素やイベントを取得する方法」の応用編であるクロスドメイン編について書いていこうと思います。

前回の記事をご覧になっていない方は以下をご覧ください。

iframeの中のコンテンツの要素やイベントを取得する方法(クロスドメイン対応編)

ファイル構成

file - index.html
     - child.html

HTMLJavaScript

index.html

<iframe src="./child.html" frameborder="0"></iframe>
<script>
  window.addEventListener("message", function (e) {
    let response = e.data;
    console.log(response);
  });
</script>

child.html

<button type="button" id="testBtn">クリック</button>
<script>
  const testBtn = document.getElementById('testBtn');
  testBtn.addEventListener('click', () => {
    // セキュリティを考慮して"*"の部分は送信したいURL等をした方が無難
    window.parent.postMessage("test", "*");
  }); 
</script>

簡単な記述でiframeからメッセージを受け取ることが可能です。
メッセージにはオブジェクトを仕込むことも可能なので、自由にiframeから親ページにメッセージを送信可能です。親から子にメッセージを送信することも可能ですので、次回の記事で解説したいと思います。

是非参考にしてみて下さい。