iframeの高さを自動調整する
2019-08-30
2019-08-30
前置き
今回は、iframeのコンテンツをスクロール表示したくない!ということで、Javascriptでiframeの高さを調整してみたいと思います。
対象となるiframeを取得する
```
let iframe = document.querySelector('iframe');
```
まずは調整するiframeを取得します。
iframeのコンテンツの高さを取得する
```
function getIframeHeight() {
return iframe.contentWindow.document.querySelector('#iframe_content').scrollHeight;
}
```
iframeのコンテンツの高さを取得します。
scrollHeightの他にclientHeightやoffsetHeightもあるので適宜調整してください。
iframeの高さを調整する
```
function resizeIframe() {
iframe.style.height = getIframeHeight() + 'px';
}
```
iframの高さを設定します。
iframeのコンテンツがリサイズされたイベントを登録する
```
iframe.contentWindow.addEventListener('resize', resizeIframe);
```
iframeのリサイズのイベントを登録して、終わりです。
ではでは。