動的に埋め込んだiframeの高さを取得する
2018-04-19動的に埋め込んだ 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