bootstrapでnav-tabs内のtab切替時にiframeの高さを調整するにはどうしたら良いですか?
【jQuery】iframeの高さを取得し自動調整するスクリプト(Microsoft Edgeにも対応)
こちらを参考にして組んでみたのですが、タブを切り替えた際に高さがおかしくなります
恐らく最初に取得した高さのまま表示されているのだとは思いますが対策方法が思いつきません
<ul class="nav nav-tabs"> <li class="active"><a href="#a" data-toggle="tab">タブA</a></li> <li><a href="#b" data-toggle="tab">タブB</a></li> <li><a href="#c" data-toggle="tab">タブC</a></li> <li><a href="#d" data-toggle="tab">タブD</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="a"> <iframe src="#" class="autoHeight">高さ555</iframe> </div> <div class="tab-pane" id="b"> <iframe src="#" class="autoHeight">高さ666</iframe> </div> <div class="tab-pane" id="c"> <iframe src="#" class="autoHeight">高さ777</iframe> </div> <div class="tab-pane" id="d"> <iframe src="#" class="autoHeight">高さ888</iframe> </div> </div>
(function(window, $){ $(window).on("load",function(){ $('iframe.autoHeight').each(function(){ var D = $(this).get(0).contentWindow.document; /* console.log( D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight ); */ var innerHeight = Math.max( D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight ); $(this).removeAttr("height").css('height', innerHeight + 'px'); }); }); })(window, jQuery);
のようなの時にタブをABCD切り替えてもそれぞれの高さに調整されるようにしたいのです
最初に読み込まれた時にはactiveなAのタブの高さ555pxになりますが
BやCに切り替えても555pxのままで困ってます。。。
回答1件
あなたの回答
tips
プレビュー