jQueryでiframeの高さを自動的に設定してくれるスクリプトを紹介。Webページの制作でiframeで他のページの情報を埋め込んだり、ウィジェットを埋め込んだりすることってありますよね。このiframeは高さが決まった高さなら、CSSで高さ(height)を事前に決めてあげればよいのですが、昨今のレスポンシブWebデザインでは、iframeの高さがPCとスマホ・タブレットで結構変わってしまうことも多くて、事前に高さを決め打ちで指定できないことも多くあります。そこで、JavaScript(jQuery)を使って、iframeの高さを自動的に設定してくれるスクリプトを紹介します。参考にしたページ●HTMLで準備すること高さを自動調整したいiframeのclassに「autoHeight」を付けてください。class="autoHeight"></iframe>●iframeの高さを自動的に調整してくれるスクリプトjQueryを読み込んだ状態で以下のスクリプトを実行します。jQuery);ページに配置された画像などの読み込みが完了した時点でiframeの高さを調整します。同じページ内に複数のiframeがあっても、正常に高さを設定できます。★同じドメインのiframeの高さだけが調整できますこのスクリプトは別のドメインの情報を読み込むiframeは自動的に高さを調整できません。一般的なブラウザーのiframeの仕様はそうしたルールになっているためです。フレームの内容にアクセスしようとするスクリプトは同一オリジンポリシーに従います。オブジェクトのほとんどのプロパティにアクセスできません。8/9/10/11でもキチンと動作します。★なぜ「$(document).ready」を使わないの?スクリプトがよくある「$(document).ready」ではないのは、要素の配置が終わっていても、iframeの中身を読み込み終わっているわけではないので、スクリプトの実行されたタイミングによってはiframeの高さが取れない場合があるためです。「$(window).load」で要素の読み込みが完了した時点でiframeの高さを取得することで、意図した高さを設定できます。★「elm.contentWindow.document.documentElement.scrollHeight」だけで良いのでは?よく紹介されているiframeの高さを調整するスクリプトでは「elm.contentWindow.document.documentElement.scrollHeight」で高さを取得するように書かれています。今回のスクリプトでは、それ以外の値も取得しています。Edgeの場合は、iframeの高さが小数点を持った場合(例:250.55px)に、「$(this).get(0).contentWindow.document.documentElement.scrollHeight」では、iframeの高さの小数点が切り捨てられた値が出力されるので、1px足りなくなり、スクロールバーが出てしまいます。「$(this).get(0).contentWindow.document.body.scrollHeight」は小数点を切り上げた値が出力されるので、こちらを使います。(line-heightが1.5だったり、font-sizeが13pxでmargin-bottom:0.5emなどとすれば、簡単に整数値ではない高さになるので注意が必要です)では、いつでも「$(this).get(0).contentWindow.document.body.scrollHeight」使えば良いのでは?というと、上記のソースのコメントアウト部分を解除して数値を見てみると、ブラウザーによって、「$(this).get(0).contentWindow.document.body.scrollHeight」の方が小さい値を出力する場合があります。このため、JavaScriptの関数「Math.max」で取得できる値の中で最大の値をiframeの高さとすることで、スクロールバーが出ることを防いでいます。