iframeの高さをJavaScriptで自動的に調整する方法
実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法
iframe で読み込んだ子ページの高さが動的に変わる場合、読み込み元の html に固定サイズで height 属性を設定するのは望ましくありません。 サイズ設定が大きすぎると余白ができるし、小さすぎると縦スクロールバーが表示されます。ページ内の一部に縦スクロールバーが表示されるのはユーザビリティが悪くなります。 よって iframe 内のコンテンツサイズが動的に変わるのであれば、親画面で設定する iframe の高さも動的に変更すれば良いのです。 iframe の子画面要素に合わせて動的に高さを指定する方法呼び出し元の親画面の設定まず親画面での iframe 呼び出し方法です。ここで高さを設定しないのがポイントです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
