FF14キャラジェネにpostMessageすると高さを返すようにした

⚠️ このエントリーは1年以上前に作成されたものです。情報の賞味期限切れにご注意ください。

タイトル出落ち。

このブログの右サイドバー（モバイル環境だとケツ）にも表示してる FFXIV キャラクター情報ジェネレーターは、他サイトに埋め込むときに iframe を使うことを想定している。
そもそもiframeはCSSがまともに効かないし、クロスオリジンだから直接高さを習得することができなかった。

旧ブログではハードコードしていい感じの高さにしていたけど、超ダサいからちゃんとpostMessageでやり取りできるようにした。
ジェネレーター側は onmessage で

{
  ffxiv: {
    height: document.body.scrollHeight,
  },
}

JavaScript

のオブジェクトを返すので、

const widget = document.querySelector('#ffxiv_widget');
window.addEventListener('message', (event) => {
  if (event.data.ffxiv) {
    widget.style.height = `${event.data.ffxiv.height}px`;
  }
}, false);
widget.onload = () => {
  const cw = widget.contentWindow;
  cw.postMessage('', '*');
}

JavaScript

みたいな感じのを書いておくと、ジェネレーター読み込み時にいい感じの高さにしてくれる。