具有自動高度計算功能的Bootstrap響應式iframe

Question

我需要在iFrame的iFrame中嵌入鏈接，這些內容是響應性的，我希望iframe自動調整為iFrame的高度，以便可以看到整個iframe頁面。 http://quran.ksu.edu.sa/m.php

小提琴http://jsfiddle.net/ww09rtbb/3/

我不確定該怎么做才能使iframe的所有內容可見。

不知道css屬性中是否有任何構建可做，或者我必須使用jquery

更新：我已經設法用jQuery做到了

http://jsfiddle.net/ww09rtbb/5/

我正在計算寬度並乘以1.8

var ifrmw = $('.content-wrapper' ).width();
var iframeh= ifrmw * 1.8;
//alert(iframeh);
$('.iframecls').css('min-height',iframeh); 

可以進一步改進以獲得iframe的精確高度

Answer 1

我遇到了類似的問題，我不得不編寫一個函數，使用setInterval()每200毫秒檢查iframe的高度：

function adjustIframeHeight(iframe, minHeight, fix){

    var height = 0, $frame = $(iframe);
    if(typeof fix=='undefined') fix = 0;

    setInterval(function(){
        if( typeof $frame.contents()!=null && typeof $frame.contents() !='undefined' && $frame.contents() !=null && $frame.attr('src')!='') {
            curHeight = $frame.contents().find('body').height();
            $frame.css('height', height + fix); // you might need to add some extra values like +20px.
        } else {
            $frame.css('height', minHeight); // minimum height for the iframe.
        }
    },200);

}

然后這樣稱呼它：

$(function(){ 
    adjustIframeHeight('#iframeID', 200, 0);
});