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のリサイズのイベントを登録して、終わりです。

ではでは。