The Code

このチュートリアルでは、2 つの HTML ファイルが必要です。iframe を配置する親ファイルと iframe のコンテンツを含む子ファイルです。

child.html

子ファイルには簡単なダミー テキスト ジェネレータを含め、ユーザーがボタンをクリックして lorem ipsum テキストでもう一段追加できるようにしました。

このチュートリアルは iframe についてであり、iframe 内の機能については触れていないので、以下をコピーして child.html に貼り付けてください:

この CodePen で上記のコードを試すことができます:

parent.

<iframe src="child.html" style="width:100%;border:none;"></iframe>

通常の HTML5 ボイラープレート コードを追加し、次のコードを本文タグの間に挿入します。 overflow: hidden を設定したため、ボタンと最初の段落の半分が消えてしまいます。

また、overflow: hidden を設定していない場合は、上の画像のように 2 つのスクロール バーが表示されます。 これを解決するには、child.html から親ウィンドウに post メッセージを送信する必要があります！

child.html

そこで、child.html に戻って、スクリプト セクションに新しいイベント リスナーを追加する必要があります。

• 読み込むたびに、
• ウィンドウがサイズ変更されるたびに、そして
• ボタンが押されるたびに、iframe の高さを親要素に通知する必要があります。

これらのイベントが発生するたびに、sendPostMessageという関数をトリガーします。

次のコードを、<script>タグを閉じる直前に記述します：

では、sendPostMessage()関数を作成しましょう。

次のコードは、今書いたコードの上に記述します:

postMessageメソッドの第 2 引数は、ターゲットのオリジンを表します: 親ウィンドウのホスト名です。

これは、メッセージが特定のドメインにのみ送信されることを確認する、セキュリティのために有用ですが、開発目的のために、ターゲットの起源を '*' に設定することができます。

全体として、child.html のコードは次のようになります:

parent.html

ブラウザで parent.html を読み込み、コンソール (Google Chrome では CTRL+Shift+ J プレス) を開いてみてください。 最後のステップは、これらの値のいずれかが送信されるたびに、これらを使用して iframe の高さを設定することです。

メッセージ イベントをリッスンする必要があり、イベントを受信するたびに、それを使用して iframe の height プロパティを設定します (さらに、少しパディングします):

全体として、parent.html ファイルは次のようになります。