目次
表示するページのHeghtにあわせて<iframe＞のHeightを自動的に変更する
PHPでiframeを使って静的HTMLのコンテンツを表示するだけなら簡単です。
<iframe src="contents001.html" width="100%" height="800px"></iframe>
でも、表示するページによって高さが変わるのに、<iframe>のサイズが固定なので、でスクロールバーがでてしまいます。
これは少々不細工なので、対策をしてみました。
iframeのサイズを内部コンテンツにあわせるJavaScript
デフォルトのheightよりも長いコンテンツの時は、コンテンツにあわせてiframeの長さがのびてくれれば問題はないのですが、iframeではそういう指定ができません。
サイズが固定になります。
スクロールバーがでてしまいます。
これはHTMLだけでは対応できません。
JavaScriptで自動調節する処理を作って対応しました。
ファイル名は「ifexp.js」とでもしておきます。
中身はこうです。
ifexp.js
('iframe')
.on('load', function(){
try {
$(this).height(0);
if(this.contentWindow.document.documentElement.scrollHeight > 800){
$(this).height(this.contentWindow.document.documentElement.scrollHeight);
}else{
$(this).height(800);
}
} catch (e) {
}
})
.trigger('load');
こうしてHTMLをiframe内で表示する時に高さを自動調節します。
やってることはシンプルです。
documentElement.scrollHeightでコンテンツの高さを取得して、iframeのHeightに指定している高さ（例では800px）より大きければ、それにあわせて、iframeのHeightにセットしているだけです。
今回はたまたま、jQueryを使っている環境だったので、$(this)等jQueryのセレクタを使ってますので、使うときには以下のようにHTMLで読み込んで使ってます。
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/ifexp.js"></script>
こんな感じです。
ではでは。