window.onloadを利用したiframeの高さ調整に関して

Question

前提・実現したいこと

初めまして。宜しくお願い致します。
現在、window.onloadを利用してiframe内の子要素の高さを取得し、子要素の高さをiframeの高さとして反映させているのですが、
ページ読込後、当該箇所へ瞬時にスクロールすると、余計な余白ができてしまいます。
一般的(?)なスクロールのスピードだと、綺麗に表示されるので、
急速なスクロールではwindow.onloadによる高さの取得が間に合っていない？のではと思っておりますが、
解決方法が分からず質問させていただきました。
ご教示のほどよろしくお願いいたします。

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

このような状態になります

該当のソースコード

<script type="text/javascript">
  　window.onload = function () {
    var adDiv, adFrame, elm;
    adDiv = window.top.document.getElementById('sample_ad');
    adFrame = adDiv.getElementsByTagName('iframe')[0];
    elm = adFrame.contentDocument.getElementsByClassName('ad_slot1')[0];
    adFrame.style.height = elm.scrollHeight + "px";
  };
</script>
<!-- この下に子要素のテキストや画像の記述をしています -->

Comments

[oikashinoa]

> adFrame = adDiv.getElementsByTagName('iframe')[0];
iFrameのソース記載もしたほうが良いと思います。

Answer 1

iframeのロードを待つようにしてみてはいかがでしょう。

Comments

[perikan_dayo]

回答ありがとうございます。この記述自体がiframeの中にはいっておりまして、window.onloadをしているので、既にiframeのロードを待つようになっていると思ったのですが、なっていないのでしょうか？？

[kei344]

コードを読めていませんでした、すみません。
読み込みが間に合っていないこと自体には（読み込みが終わらないと高さが取れないので）対処できませんね。
気休めかもしれませんが Prerender とか試してみてください。

【Prerender APIでWebサイトを高速化 - Qiita】
https://qiita.com/sueshin/items/202d82e08b9d051004fd