[英]Bootstrap responsive iframe with auto height calculation
I need to embed link in iFrame contents of the iframe are responsive and i want iframe to auto adjust to the height of iFrame so that whole iframe page is visible. 我需要在iFrame的iFrame中嵌入链接,这些内容是响应性的,我希望iframe自动调整为iFrame的高度,以便可以看到整个iframe页面。 http://quran.ksu.edu.sa/m.php
Fiddle http://jsfiddle.net/ww09rtbb/3/ 小提琴http://jsfiddle.net/ww09rtbb/3/
I am not sure how to do it so that all content of iframe are visible. 我不确定该怎么做才能使iframe的所有内容可见。
Not sure if there is any build in css property to do it or i have to use jquery for it 不知道css属性中是否有任何构建可做,或者我必须使用jquery
UPDATED: I have somehow managed to do it with jquery 更新:我已经设法用jQuery做到了
http://jsfiddle.net/ww09rtbb/5/ http://jsfiddle.net/ww09rtbb/5/
I am calculating and multiplying width by 1.8 我正在计算宽度并乘以1.8
var ifrmw = $('.content-wrapper' ).width();
var iframeh= ifrmw * 1.8;
//alert(iframeh);
$('.iframecls').css('min-height',iframeh);
This can further be improved to to get exact height of iframe 可以进一步改进以获得iframe的精确高度
I ran into a similar issue, and I had to write a function that checks for the height of the iframe
every 200 milliseconds using setInterval()
: 我遇到了类似的问题,我不得不编写一个函数,使用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);
}
Then call it like this: 然后这样称呼它:
$(function(){
adjustIframeHeight('#iframeID', 200, 0);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.