動的に埋め込んだiframeの高さを取得する

動的に埋め込んだ iframe の高さを取得しようとしたときのメモです。

やりたかったこと

以下のように動的に iframe を埋め込んで、iframe の高さを埋め込んだページの高さに合わせたかった。

<div id="content-area"></div>

<ul>
    <li><a class="iframe-btn" href="/hogehoge-1">hogehoge 1</a></li>
    <li><a class="iframe-btn" href="/hogehoge-2">hogehoge 2</a></li>
    <li><a class="iframe-btn" href="/hogehoge-3">hogehoge 3</a></li>
</ul>

という html を用意して、各リンクをクリックした時にそのリンク先を iframe で埋め込むというもの。

$('.iframe-btn').click(function(e){
    e.preventDefault();
    let iframe = `<iframe frameborder="no" src="${$(this).attr('href')}"></iframe>`;
    $('#content-area').html(iframe);
});

このままの実装では iframe にスクロールバーが出てしまいます。
あらかじめ css で #content-area に高さを指定した場合、 iframe 内のページによってはスクロールバーが出たり、下に空白が出たりします。

やったこと

iframe を埋め込む js 部分を下記のようにしました。

let iframe = `<iframe frameborder="no" src="${$(this).attr('href')}"></iframe>`;
$('#content-area').css('visibility', 'hidden').html(iframe);
setTimeout(function(){
    let iframeHeight = $('#content-area iframe').get(0).contentWindow.document.body.scrollHeight;
    $('#content-area').css('height', `${iframeHeight + 20}px`).css('visibility', '');
}, 200);

200 ミリ秒後に iframe の高さを取得して、 #content-area の高さにセットしています。(+20 は調整分)

今回は iframe で埋め込むページが単純な静的ページなので 200ミリ秒 で大丈夫ですが、確実とは言えません。

イメージとしてはここを

$('#content-area iframe').load(function(){ ... });

のようにしたいところですが、これでは取得できませんでした。

とりあえず静的ページに対してはこれで大丈夫そう…?

comments powered by Disqus