JavaScript-iframe高度如何自适应?

JavaScript-iframe高度如何自适应?

清晨说ぺ晚安 发布于 2017-09-22 字数 178 浏览 1056 回复 2

我希望的效果是:
如果iframe的高度>500px,就只显示500px,然后加个滚动条。
如果操作了iframe上的元素,使其高度<500px,就显示实际的高度。

代码如何实现?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

浮生未歇 2017-10-27 2 楼

我也遇到了类似的功能。我现在这样子处理的,感觉有点纠结,以下是 demo,有两个 page,t.html 和 1.html

//t.html
<head></head>
<body>
<iframe id="frame_content" height='500' src="1.html?bz=1" scrolling="no" frameborder="0"></iframe>
</body>
</script>

 //1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jq.js" type="text/javascript"></script>
</head>
<body>
    2<br> 1<br> 1<br> 1<br> 1<br>
    1<br> 1<br> 1<br> 1<br> 1<br>
    1<br> 1<br> 1<br> 1<br> 1<br>
    1<br> 1<br> 1<br> 1<br> 1<br>
    1<br> 1<br> 1<br> 1<br> 1<br>
    1<br> 1<br> 1<br> 1<br> 1<br>
    1<br> 1<br> 1<br> 1<br> 1<br>
</body>
<script type="text/javascript">
    var l = window.location.href;
    if(l.indexOf('bz=1')!=-1){
        var clientH = $('body').height();
        if(clientH > 500){
            var ihtml = '<iframe id="frame_content" height="500" src="1.html" scrolling="yes" frameborder="0"></iframe>';
        }else{
            var ihtml = '<iframe id="frame_content" height="'+clientH+'" src="1.html" scrolling="no" frameborder="0"></iframe>';
        }
        var piframe = parent.document.getElementById('frame_content');
        $(ihtml).insertAfter(piframe);
        $(piframe).remove();
    }
</script>
</html>

注意
1. 用到了jq;
2. t.html 里边的地址后边传了个标记参数;
3. 使用的替换整体框架属性。

瑾兮 2017-10-06 1 楼

原理在此:

<iframe id="frame_content" src="b.html" scrolling="no" frameborder="0"></iframe>

<script type="text/javascript">

function reinitIframe(){

var iframe = document.getElementById("frame_content");

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

</script>