別ドメインの iframe の情報を取得する方法

別ドメインの iframe 内の情報はクロスドメインのセキュリティ制約によりブラウザでエラーが発生してしまうため、通常は閲覧できないが読み込み先で postMessage を送信し、読み込み元でそのメッセージを受け取るプログラムを記述することで取得が可能となる。

// 読み込み先（子：iframe内）
let text = 'メッセージ';
window.parent.postMessage(["message", text], "*");

// 読み込み元（親：iframeを設置しているHTML）
window.addEventListener('message', e => {
  let eventName = e.data[0];
  let data = e.data[1];
  if (eventName === 'message') {
    console.log(data); // メッセージ
  }
});

逆に親から子にメッセージを送る場合は、下記のようにする。

// 読み込み先（子：iframe内）
// 先ほどの親と全く同じ
window.addEventListener('message', e => {
  let eventName = e.data[0];
  let data = e.data[1];
  if (eventName === 'message') {
    console.log(data); // メッセージ
  }
});

// 読み込み元（親：iframeを設置しているHTML）
let text = 'メッセージ';
const $iframe = document.querySelector('iframe'); // 対象のiframe
$iframe.onload = () => {
  $iframe.contentWindow.postMessage(["message", text], "*");
};