Question

我在parent.html文件中包含iframe。

我需要根据内部内容（child.html）设置iframe的大小。

child.html将包含一个冗长的文本，以下代码位于

行

child.contentWindow.document.body.scrollHeight

我得到iframe中可见内容部分的大小等同物，而不是其完整大小（不可见部分）。

知道我做错了什么以及如何解决它？

---------------------------- parent.html

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Parent</title>
    <script>
    window.name = 'parent';
    </script>
    <style>
    body {
    }
    #childIframe{

    }
    </style>

    </head>

    <body>
        <iframe id="childIframe" src="child.html" scrolling="no" frameborder="0"></iframe>
    <script>

    var child = document.getElementById('childIframe');
    child.height = child.contentWindow.document.body.scrollHeight + "px";

    </script>
    </body>


    </html>

---------------------------- child.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Child</title>
</head>
<script>
window.name = 'child';
</script>

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium placerat enim, ut luctus orci porta quis. Suspendisse id dignissim nunc. Aenean non sapien in felis aliquet eleifend. Sed et nisi congue, pharetra ligula accumsan, accumsan diam. Praesent risus est, porttitor ut venenatis et, convallis non orci. Duis viverra finibus est, vel aliquam purus elementum finibus. Nunc ullamcorper rhoncus eros id pulvinar. Nam tellus nulla, pretium quis consequat sit amet, rutrum non augue.

.... very very long text here
</p>

</body>

</html>

Answer 1

首选：

function setHeight()
{
     var child = document.getElementById('childIframe');
     child.style.height = child.contentWindow.document.body.scrollHeight + "px";
}

或

child.height = child.contentWindow.document.body.scrollHeight;

iframe height属性不占用单位，而style属性则不占用。

在onload上执行此操作：

<iframe id="childIframe" src="child.html" scrolling="no" onload="setHeight()" frameborder="0"></iframe>

Answer 2

我们使用这样的代码......

父页面头部的脚本：

<script type='text/javascript'>
function SetHeight(wParent,wChild) { // parent window, child window
    var f = wParent.frames["iFrameName"]; // whatever the iframe's name is
    if (f) f.style.height=(wChild.document.body.scrollHeight + 30)+"px";
}
</script>

如果从子页面调用，请添加到onload事件..

<body onload='SetHeight(parent,window)'>

如果从父页面调用..

SetHeight(window , window.frames["iFrameName"])

哪个事件？如果您需要代码在父框架中，那么您需要做一些事情来重复检查加载框架的状态以检查其状态，可能使用setTimeout。只有在加载子页面后，您才能获得文档的高度。呈现。

BUT

如果子页面来自不同的域，那么尝试执行此操作几乎肯定会给您一个“拒绝访问”错误，因为来自父框架的javascript无法从其他域访问子项的属性。 / p>

如何根据内部内容设置iframe的大小？

2 个答案: