メモ：iframeで高さの自動調整

テキストファイルを内包させる時に高さが微妙に合わない理由を継続調査
以前の調査へ

sample.txt を用意

test.html のコード

デベロッパーツールで確認すると、
iframe タグの高さは 56 + 2 + 2 = 60 だとわかる

iframe の src は .txt ファイルなのに、中の document は html 形式に変換されている
直下の html タグの高さは 66 なので、iframeタグの 60 より大きい
だからスクロールバーが表示されてしまうのだろう

body タグの高さは 40 + 8 + 8 = 56 なので、iframe タグの height と同じ値
(test.html の setSize() でセットしているのはこの値)

テキストファイルの内容が pre タグ内に表記されている
pre タグの高さが、40 + 13 + 13 = 66 なので、
html タグ全体の高さが 66 になってしまっていたのだと判明

Element.children が使えそう

Elementオブジェクトのchildrenプロパティは、
その要素の全ての子要素を含むHTMLCollection(≠配列)を返す

test2.html を作成

iframe タグの height が 66 になり、内包要素のサイズと一致した
しかし src で指定するファイルの種類が違ったら同じコードでは対応できないだろうから、
src の拡張子を取得 ⇒ 分岐させるコードなどの対応が必要になりそう

ダイレクトに html タグの高さを取得できれば、その方がいいな

test3.html を作成

できるじゃん！
これなら、html ファイルでも txt ファイルでも分岐させなくて済むし、
コードもスッキリして気持ちいい

これでファイルの種類に関係なく iframe の高さを合わせられるようになった

参考になったサイト