星期六, 2017-09-02 12:16 — adminshiping1

Js获取Iframe页面高度，并将高度赋值给Iframe

我当前是这样设计的。一个div中嵌套Iframe，但是我不想给这个div一个固定高度，我想让Iframe中的高度去将其填充。我想写一个Js获取Iframe的高度，然后将Iframe页面的高度，动态加载到 <iframe src="default.html" id="mainweb" name="mainweb" width="100%...展开

Memory丶思忆 | 浏览 23427 次问题暂时关闭

推荐于2016-04-24 18:10:34最佳答案

你好，你这个问题就是iframe自适应高度的问题。以下代码可以解决：
<iframe src="default.html" id="mainweb" name="mainweb" width="100%" height="100%" frameborder="0"  onLoad="iFrameHeight()" ></iframe>
<script type="text/javascript" language="javascript">
function iFrameHeight() {
var ifm= document.getElementById("mainweb");
var subWeb = document.frames ? document.frames["mainweb"].document :
ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>
 
为了测试，iframe的height你可以预先设置一个固定高度比如：height="200"（也可以使用100%）,iframe加载完，会自动调整页面大小。

 
追问
但是我外面的那个div高度不想定义。不定义的话，Iframe的高度就是150px。
 
那我是不是可以将这个Iframe把 Iframe外层 div的高度撑起来呢？
 
而且现在这个方法也貌似木有效果呀。。。我截图看哈。
只要我外面的div不定义高度，那么Iframe的高度就是150
 
追答

外层的div高度你设为auto或者不设置就可以了。
上面代码你可以放到页面测试的。
你在 
ifm.height = subWeb.body.scrollHeight;//后面加一行
alert(subWeb.body.scrollHeight)//测试返回iframe的高度、

看看返回的高度是多少
 
追问

亲，看私信吧。哎

来自 https://zhidao.baidu.com/question/1239120136458946419.html

用JS控制IFrame的高度，让它的高度自动适应

代码：

<!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>
    <title>用JS控制IFrame的高度，让它的高度自动适应</title>
    <style type="text/css">
        .letCenter { margin: 30px auto; width: 800px; height: 50px; }
    </style>
 
    <script language="javascript" type="text/javascript"> 
        //输入你希望根据页面高度自动调整高度的iframe的名称的列表 
        //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 
        //定义iframe的ID
        var iframeids = ["menuFrame"]; 
        //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 
        var iframehide = "yes"; 
        function dyniframesize() {
            var dyniframe = new Array(); 
            for (var i=0; i<iframeids.length; i++) 
            { 
                if (document.getElementById) 
                { 
                    //自动调整iframe高度 
                    dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); 
                    if (dyniframe[i] && !window.opera) 
                    { 
                        dyniframe[i].style.display = "block";
                        if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) {
                            //如果用户的浏览器是IE 
                            var contentDocHeight = dyniframe[i].contentDocument.body.offsetHeight;
                            dyniframe[i].height = contentDocHeight;
                        }
                        else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) {
                            //其它浏览器
                            dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
                        }
                    } 
                } 
                //根据设定的参数来处理不支持iframe的浏览器的显示问题 
                if ((document.all || document.getElementById) && iframehide=="no") 
                { 
                    var tempobj = document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
                    tempobj.style.display="block"; 
                } 
            } 
        }
        if (window.addEventListener) {
            window.addEventListener("load", dyniframesize, false);
        }
        else if (window.attachEvent) {
            window.attachEvent("onload", dyniframesize);
        }
        else {
            window.onload = dyniframesize;
        }
    </script>
 
</head>
<body>
    <div class="letCenter">
        <h1>
            这是主页面</h1>
    </div>
    <div style="border:solid 1px red; margin:0px 0px 0px 0px; padding:0px 0px;">
        <iframe id="menuFrame" name="menuFrame" frameBorder="0" scrolling="no" src="ControlIFrameHeight_Child.htm" width="100%"></iframe> 
    </div>
</body>
</html>

谢谢浏览！
来自 http://www.cnblogs.com/great/archive/2011/03/17/control-iframe-height-with-javascript.html

JS动态修改iframe高度和宽度的方法

本文实例讲述了JS动态修改iframe高度和宽度的方法。分享给大家供大家参考。具体如下：

如果希望通过按钮动态修改iframe的高度和宽度，可以参考下面的JS代码

<!DOCTYPE html>
<html>
<head>
<script>
function changeSize()
{
document.getElementById("myframe").height="300";
document.getElementById("myframe").width="300";
}
</script>
</head>
<body>
<iframe id="myframe" src="/default.asp"
height="200" width="200">
<p>Your browser does not support iframes.</p>
</iframe>
<br><br>
<input type="button" onclick="changeSize()"
value="Change size">
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

来自 http://www.jb51.net/article/63265.htm

普通分类:

javascript

You are here

Js获取Iframe页面高度，并将高度赋值给Iframe

Js获取Iframe页面高度，并将高度赋值给Iframe

JS动态修改iframe高度和宽度的方法

友情链接

搜索表单

用户登录

You are here

Js获取Iframe页面高度，并将高度赋值给Iframe

Js获取Iframe页面高度，并将高度赋值给Iframe

JS动态修改iframe高度和宽度的方法

友情链接