具有自动高度计算的引导响应 iframe答案

【问题标题】：Bootstrap responsive iframe with auto height calculation具有自动高度计算的引导响应 iframe
【发布时间】：2016-04-02 02:14:40
【问题描述】：

我需要在 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 的精确高度

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案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);
});

【讨论】：