"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

静的HTMLページのHeghtにあわせて<iframe>のHeightを自動的に変更する方法(備忘)

f:id:arakan_no_boku:20180427232928j:plain

iframe内に表示する静的HTMLページのHeightにあわせて、iframeのHeightを変更する方法を整理します。

目次

静的コンテンツをiframe内で表示する時の問題

PHPでiframeを使って静的HTMLのコンテンツを表示します。

表示をするだけなら簡単そのもの。

<iframe src="contents001.html" width="100%" height="800px"></iframe>

これで表示はできます。

でも、表示するページによって高さが変わるのに、<iframe>のサイズが固定なので、でスクロールバーがでてしまうのですね。

実際は、動的にコンテンツのURLを切り替えるので、これは少々不細工なので、対策をしてみました。 

iframeのサイズを内部コンテンツにあわせる方法

デフォルトの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>

こんな感じです。

ではでは。