公開日: JavaScript
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');
新型コロナウイルスが世界に猛威を振るっている。在宅でのリモートワークが推奨され、家で仕事している人が増えているとのこと。 そんな中、なぜか家だと仕事にな・・・
主な変更点 ・3つのブログ（「0から目指すWebマスター」「シンプルシンプルデザイン」「シンプルシンプルデザイン代表ブログ」）を一つにまとめました ・・・
3つのブログを一つに Web業界に足を踏み入れたのが2006年夏。完全アナログ人間がブラインドタッチからのスタート。そこで「0から目指すWebマスター」・・・
DBを修正する必要はなかった！ WordPressの管理画面で、メニューの「設定」→「一般」にある、WordPress アドレス (URL) を変更する・・・
制作経緯 4/1 新しい元号が「令和」と知る。これまでの元号って何だろうとWikipediaで調べる。4/2 ある海外の方が「令和の前って江戸時代とか縄・・・
先日、CP+2019 で行われた、鈴木 佑介（映像作家）さんによるプレゼン「動画もRAWの時代。BenQで作るカラーグレーディング環境」が、ちょうど気になって・・・
書籍「しょぼい起業で生きていく」を読んで、共感したことや改めての気づきや新たな発見を書き残しておく。 「嫌なことからは逃げろ」 「やりたくないこと・・・
直接URLを入力したり、Googleの検索結果からの遷移時にはまったく問題なかったが、Yahoo Japanの検索ボックスで検索して表示される検索結果一覧から・・・
開催日 2019年2月28日〜3月3日会場 パシフィコ横浜 / 大さん橋ホール CP+（シーピープラス）とは？ CP+はカメラや関連機器の一般ユー・・・
ぼくたちの共通点→「集客」 仕事内容を考えたとき、ぼくたちの共通点は「集客」を意識していることです。山縣力也（以降、やまけん）さんは、外壁塗装業、主に下・・・
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル：iframeの高さを自動調整するデモ・・・
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・
フォトショップでは、レイヤーごとに書き出す設定がありますが、イラストレーターにはありません。そこでレイヤーごとにPNGファイルを書き出すためのスクリプトファイル・・・
まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・
めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考： これは便利！Word・・・
前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・
2つ以上のキーで連想配列を並び替えしたいときの備忘録。 サンプル配列 var arr = []; arr.push(["5", "4", "たちつて・・・
<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・
http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・
やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・