埋め込みドキュメント(child-basic.html)

このページは iframe の中に表示されています。古いブラウザの慣習では、iframe の高さは親ページが決めた固定値になり、内容が多いとこのようにスクロールバーが出て、 一部しか見えませんでした。

新しい仕組みでは、この文書が自分のレイアウトサイズを親に公開し、親側の CSS が iframe のサイズをそれに合わせます。標準化された方法なので、たとえ親と子が 別オリジンでも postMessage を使った手動のサイズ同期は不要です。

• 親側: CSS frame-sizing でサイズ追従を指定
• 子側: <meta name="responsive-embedded-sizing"> で公開を許可
• 動的な変更: 子が window.requestResize() を呼んで通知

つまり、この文書の高さぶんだけ iframe が伸び、ページ全体をスクロールすれば 埋め込みコンテンツを端までシームレスに読めるようになります。ウェブメールの 外部フォーム、ヘルプウィジェット、地図やチャートの埋め込みなど、これまでは ライブラリに頼っていた場面で使える技法です。

実際のニュースレターのように、文章の長さは埋め込まれる側では把握できません。 高さを固定してしまうと、短い内容なら余白が残り、長い内容なら隠れてしまいます。 そのどちらも起こらないのが、レスポンシブ iframe の目指すところです。

このデモページがスクロールバーなしでここまで表示されていれば、 frame-sizing が正しく機能しています。