iframeウィジェットの高さを中身の高さに調整する方法

いわゆるサービスのウィジェットを提供するときの話

iframeのウィジェットを提供しようとすると、高さを中身のHTMLの高さにしたいことがある。
iframeの中へのアクセスはクロスオリジンの関係でアクセスはできない。
この際に利用するのがHTMLのWeb APIであるwindow.postMessage。

iframe内のページで

window.addEventListener('load', (event) => {
  window.parent.postMessage(渡す情報, '*');
});

とする。
渡す情報は今回の場合だと高さだけでいいのでdocument.getElementsByTagName("html")[0].scrollHeightなどを渡す。

受け取り側のiframeを埋め込む側では

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  if (event.origin !== "http://example.org") return;

  // event.dataに渡された情報が入ってる
}

とする。messageのイベントはグローバルなものなので、originが正しいかどうかをチェックする。
グローバルなものであるので、渡す情報には最低限にしないとセキュリティの問題になる。

場合によっては同じウィジェットを複数表示されてしまうケースがある(サイズ違いで出されるなど)
このような際、サイズ違いだと高さが異なってくるケースがある。

このような場合は、はじめに親のほうから一意のKeyをiframeにpostMessageで渡してからiframe側がそのKeyを一緒にオブジェクトにまとめて返せばiframeを一意に出来るので個々の高さ調整が可能。