予約フォームやコメント欄、外部サービスの口コミ表示など、サイトに別ページを埋め込む場面ではいまも iframe がよく使われます。そのたびに悩まされるのが高さの問題です。中身が長くなると枠の中にスクロールバーが出てしまい、かといって大きめの固定値にすると下に不自然な余白が残ります。Chrome 154 では、この高さ合わせをブラウザ側に任せられる仕組みが入りました。
これまでの高さ合わせは手作業だった
iframe は既定では自分専用の表示領域を持ちます。埋め込まれた文書がその領域より縦に長ければ、利用者には枠の中にもう一本スクロールバーが見えることになります。ページ全体のスクロールと枠内のスクロールが二重になり、スマートフォンでは特に操作しにくくなります。
これを避けるため、制作現場では埋め込まれた側で中身の高さを測り、postMessage() で親ページへ送り、親ページ側の JavaScript で iframe の高さを書き換える、という手順を組むのが定番でした。Chrome for Developers の解説でも、今回の機能はこのよくある実装を置き換えるものと位置づけられています。外部サービスが配布する埋め込みコードに、高さ調整用のスクリプトが一緒に付いてくるのもこのためです。
この方法は動きますが、送る側と受け取る側の両方にコードが要り、送信元の確認を怠ると関係のないページからのメッセージで高さを変えられてしまうおそれもあります。小さなフォームひとつのために毎回これを書くのは、正直なところ手間でした。
親ページと埋め込み側の双方で宣言する
新しい仕組みでは、親ページ側で iframe に frame-sizing という CSS プロパティを指定します。縦方向に伸ばしたい場合は次のように書きます。
.embed {
width: 100%;
frame-sizing: content-height;
}ただし、親ページが指定するだけでは有効になりません。埋め込まれる文書の側も、head に専用の meta 要素を置いて「中身の大きさに合わせてよい」と同意する必要があります。
<meta name="responsive-embedded-sizing" content="allow-origins=*">frame-sizing には、従来どおりの動きを保つ auto のほか、content-width、content-height、content-inline-size、content-block-size が用意されています。横書きのサイトで縦に伸ばしたい埋め込みなら、content-height か content-block-size を使う場面がほとんどになりそうです。max-height: 80vh のような既存の CSS の制約と組み合わせることもできるので、長くなりすぎる中身に上限を設けておくこともできます。
中身が後から変わるときの扱い
ブラウザは埋め込み先のレイアウト変更を常に監視しているわけではありません。「もっと見る」でコメントを追加読み込みしたり、折りたたみを開いたりして中身が変わったときは、埋め込まれた側で window.requestResize() を呼んで計算し直しを求めます。解説によると、文書の変更をひととおり済ませてから呼ぶのがよいとされています。枠の大きさが変わると表示領域が変わり、それが中身を変え、また大きさが変わる、という繰り返しを避けるために、あえて明示的に呼ぶ形にしているそうです。
別ドメインの埋め込みでは許可先を絞る
この仕組みは、別ドメインから読み込む iframe でも使えます。その場合、埋め込まれる側の meta 要素で、高さ合わせを許す親ページのオリジンを指定できます。
<meta name="responsive-embedded-sizing" content="allow-origins=https://publisher.example">複数のオリジンを許す場合は空白で区切って並べます。解説では、外部向けのウィジェットでは必要なオリジンだけに絞るよう勧めています。また、この指定はどのサイトが自分のページを埋め込めるかを決める Content Security Policy の frame-ancestors とは役割が別で、それを補う位置づけとされています。埋め込みを許すかどうかと、中身の大きさを親に伝えてよいかどうかは、分けて考えるということです。
自社で予約フォームや問い合わせフォームを別システムで動かし、複数のサイトに埋め込んでいるような構成なら、allow-origins=* で済ませず、実際に埋め込むドメインを書いておくのが無難です。
今の実装を残したまま試せる
現時点でこの機能を使えるのは Chrome 154 以降で、他のブラウザでの対応はこれからです。そのため、すぐに従来の高さ調整スクリプトを外すことはできません。解説では、@supports を使って対応ブラウザだけで新しい指定に切り替える書き方が紹介されています。
.widget {
width: 100%;
height: 500px;
}
@supports (frame-sizing: content-height) {
.widget {
height: auto;
frame-sizing: content-height;
}
}埋め込まれた側でも、"requestResize" in window で有無を確かめてから呼べば、未対応のブラウザでエラーになることはありません。既存の postMessage() による調整を代替手段として残しつつ、対応ブラウザでは新しい仕組みに任せる、という段階的な移行がしやすい設計です。
WordPress で外部フォームや予約システムを埋め込んでいるサイトでは、埋め込み元のサービスがこの meta 要素に対応しないと親ページ側だけでは使えません。自社で埋め込み用のページを用意している場合は、まずそちらに meta 要素を入れて Chrome で挙動を見ておくと、他のブラウザが追いついたときにスクリプトを外す判断がしやすくなりそうです。iframe の高さという地味ながら長年の手当てが必要だった部分が、標準の書き方に置き換わっていく流れとして、覚えておいて損はないと思います。
