iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。
サンプル：iframeの高さを自動調整するデモ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe src="a.html" frameborder="0" width="100%" height="150"></iframe>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$('iframe')
.on('load', function(){
try {
$(this).height(this.contentWindow.document.documentElement.scrollHeight);
} catch (e) {
}
})
.trigger('load');
</script>
</body>
</html>$('iframe')
.on('load', function(){
try {
$(this).height(this.contentWindow.document.documentElement.scrollHeight);
} catch (e) {
}
})
.trigger('load');iframeがキャッシュされてもload処理を行うためにjQueryのtriggerメソッドを使っています。一つ以上のiframeに対してケアするため、triggerHandlerではなくtriggerを使っています。
try catch を使っているのは、クロスブラウザ検証を怠っているためで、仮にcontentWindow.document.documentElement.scrollHeightがエラーを返して致命的なバグにならないように配慮しました。
サンプル：iframeの高さを自動調整するデモ
ある条件において高さが自動調整されずに余白が残る場合があるようです。そんなときは是非試してみてください！（コメントいただいたe3961さん、ありがとうございます！）
$('iframe')
.on('load', function(){
try {
$(this).height(0);
$(this).height(this.contentWindow.document.documentElement.scrollHeight);
} catch (e) {
}
})
.trigger('load');
数ヶ月前、WordPress本体をバージョンアップして、エディタがガラリと変わった。その際、それまでサイドナビに、Custom Post Type UI（CP・・・
書籍「売れるデザインのしくみ」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。テキストのみで備忘録として残しておくが実際はイラストと・・・
使えるデザインになっている？→ デザインは正しいインプットによって、人の暮らしや夢を助けるツールサクサクと動く、機能するデザインになっている？→ デザインが機・・・
書籍「売れるデザインのしくみ」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。2009年に出版されたと知って驚き。10年前と言えば、・・・
書籍「スターバックスはなぜ値下げもテレビCMもしないのに強いブランドでいられるのか?」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。20・・・
いつもは直接アップロードしているので気にしていなかったが、WordPress管理画面のメニュー「メディア」からfavicon.icoをアップロードしようとした・・・
2020年7月28日 23:00。ついに、α7SIIIがはじまる。次々と発表される機能に思わず声を上げることもありながら、物欲は上昇していく。 公式Yo・・・
一年前まで「LINEモバイル＋Softbank光」という組み合わせで通信環境を整えていた。スマホと家のネットで5,0000円未満に抑えることができて大満足だっ・・・
いよいよ2020年7月29日(水) 13:00に、α7S 3の詳細が発表される。これをきっかけに、カメラをはじめる人もいるはず。 そんな方に向けて、So・・・
キヤノンのR5/R6が発表されて2日。ぼくの脳はもう完全に冷静を取り戻しつつある。 いろんなYouTuberさんたちの「全財産投げ打ってでも買う！」宣言・・・
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル：iframeの高さを自動調整するデモ・・・
まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・
めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考： これは便利！Word・・・
やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・
<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・
2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつて・・・
フォトショップでは、レイヤーごとに書き出す設定がありますが、イラストレーターにはありません。そこでレイヤーごとにPNGファイルを書き出すためのスクリプトファイル・・・
http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・
WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・
WEB制作マークアップJavaScriptiframeの高さを自動調整する | シンプルシンプルデザイン