iframeの高さを取得してheight:100%に自動調整するJSコード

動的ページだろうが、静的ページだろうが、同一サイトページだろうが、外部ページだろうが、何でも挿入できるiframeですが、読み込むページの内容によってスクロールバーが出てしまいます。

スクロールバーが出ないように大き目の高さ設定をするなんてダサいことはしたくない。

そんなiframeの高さ設定を素のJavaScritのみで解決できるコードです。

<iframe id="iframeID" onload="iframeFUNCTION()" src="iframe.html"
scrolling="no" frameborder="0" allowfullscreen="allowfullscreen" style="width:100%;"></iframe>
<script>
const iframeID = document.getElementById('iframeID');
function iframeFUNCTION(){
iframeID.style.width = iframeID.contentWindow.document.body.scrollWidth + "px";
iframeID.style.height= iframeID.contentWindow.document.body.scrollHeight + "px";
}
</script>

「scrolling="no"」「style="width:100%;"」を追記することで、完全な同一ページコンテンツに見えますね。

	JavaScript
	2021.03.14 20:30
	2021.03.14 20:35

Related entry

Pickup entry

• BACK
• NEXT