我需要在 iFrame 中嵌入链接,iframe 的内容是响应式的,我希望 iframe 自动调整到 iFrame 的高度,以便整个 iframe 页面可见。
http://quran.ksu.edu.sa/m.php
fiddle 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 的精确高度
最佳答案
我遇到了类似的问题,我不得不编写一个函数,使用 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);
});
关于javascript - Bootstrap 响应式 iframe,具有自动高度计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34489975/