Javascriptでiframeの高さと幅を、画面サイズ変更のたびに自動調整する方法

前提

HTMLでWebページを作成していて、iframeでヘッダー部分を埋め込んでいます。
画面サイズを変更するたびにiframeの高さと幅を自動調整できるようにJavascriptを記述していますが、意図通りに動作しません。

実現したいこと

Javascriptを利用して、画面サイズを変更するたびにiframeの高さと幅を画面幅に合わせて自動調整されるようにしたいです。

発生している問題・エラーメッセージ

最初にページを開いたときのiframeの幅と高さは、画面サイズに合わせて調整されて表示されるのですが、画面サイズを広げたり、縮めたりした際には、iframeのサイズが自動調整されません。
画面を再読み込みすると画面サイズに合わせて調整されます。
Javascriptに３か所console.log()を設置していますが、特にエラー無く表示はされています。

該当のソースコード

html
1<iframe id="headerifr" src="header.html" width="100%" height="auto" frameborder="0" scrolling="no"
2            marginheight="0" marginwidth="0"></iframe>

Javascript
1<script>
2        //headerifrが読み込まれたときに動作
3        document.getElementById('headerifr').onload =function(){
4                resizeElement();
5        };
6
7        //画面幅変更のたびに動作
8        var resizeFlg; //setTimeoutの待機中かを判定するフラグ
9        function windowResizeFunc() {
10            //resizeFlgに値が設定されている場合は、待ち時間中なのでリセットする
11            if (resizeFlg !== false) {
12                clearTimeout(resizeFlg);
13            }
14            //300ms待機後にリサイズ処理を実施する
15            resizeFlg = setTimeout(function () {
16                resizeElement(); //リサイズを実施する処理
17                console.log("テストリサイズの中");
18            }, 300);
19        };
20        window.addEventListener("resize", windowResizeFunc);
21        console.log("テストリサイズの後ろ");
22        
23        function resizeElement() {
24            //要素を取得してから、幅と高さを取得
25            let headerifr = document.getElementById("headerifr");
26            headerifr.style.width = headerifr.contentWindow.document.body.scrollWidth + "px";
27            headerifr.style.height = headerifr.contentWindow.document.body.scrollHeight + "px";
28            console.log(headerifr.contentWindow.document.body.scrollHeight);
29        };
30    </script>

試したこと

Javascriptのコードの記述の順番や幅の取得方法を「.scrollWidth」ではなく「.clientWidth」で試したりしましたが、挙動は改善されませんでした。

Javascriptに詳しくなく、初歩的な原因なのかもしれませんが、アドバイスいただけますと幸いです。
よろしくお願いいたします。

maisumakun

2022/10/21 06:40

JavaScriptではなく、CSSで指定してはまずいのですか？

ec-

2022/10/21 06:45

コメントありがとうございます。 iframeの初期値の横幅はインラインCSSで100％に指定しています。 CSSを利用して、画面幅を広げたり狭めたりした動作に連動してiframeの高さを変更する方法は見つからなかったので、Javascriptにて対応を試みているところです。

int32_t

2022/10/21 07:51

CSSで横幅を100%に指定しているのにiframeの横幅が画面幅にならないということですか? iframeの内容の高さはiframeの幅に依存して変化する前提でしょうか? iframeの内容がすべてみえるようにiframeのサイズを変更したいということでしょうか? 何にせよ、問題を再現できる HTML・CSS・JavaScript を開示してください。

ec-

2022/10/22 23:46

Javascriptの横幅指定の記述を削除したら解決しました。コメントありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

widthは既に可変なので、heightだけJSで変更してあげたらいいと思います。

javascript
1window.addEventListener('load', resizeIframe); // ページ読み込み時に実行
2window.addEventListener('resize', resizeIframe); // 画面サイズ変更時に実行
3
4function resizeIframe() {
5  const iFrame = document.querySelector('#headerifr'); // <iFrame>要素を取得
6  const ifrBody = iFrame.contentWindow.document.querySelector('body'); // iFrameの中の<body>要素を取得
7  const height = ifrBody.scrollHeight; // bodyの高さを取得
8
9  iFrame.style.height = `${height}px`; // iFrameの高さを変更
10}

質問者様のコードの場合も、widthのサイズ変更をする記述を削除したらうまく動きます。

diff
1function resizeElement() {
2  //要素を取得してから、幅と高さを取得
3  let headerifr = document.getElementById("headerifr");
4- headerifr.style.width = headerifr.contentWindow.document.body.scrollWidth + "px";
5  headerifr.style.height = headerifr.contentWindow.document.body.scrollHeight + "px";
6  console.log(headerifr.contentWindow.document.body.scrollHeight);
7};

widthをJSで指定したらうまくいかない理由ですが、推測なんですけども、
せっかく<iframe>タグの中でwidth="100%"と書いて可変にしているのに、ページロード時、JSでwidthをpxで指定し固定幅としました。
ですので、それ以降画面サイズを変えてもiframeのwidthが変わることがなく、つまりheightも変わりません。

JSでwidthをpx指定する記述を削除すればwidth="100%"のおかげで横幅は可変になりますので、iframeの横幅の変化に応じて高さも変化してくれます。

投稿2022/10/21 07:25

編集2022/10/21 17:11