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

Question

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

我需要根据其内部内容设置 iframe 的大小 (child.html)。

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 高度属性没有单位，而样式属性有。

在加载时执行此操作：

<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。只有在子页面加载并呈现后，您才能获得文档的高度。

但是

如果子页面来自不同的域，那么尝试这样做几乎肯定会给您一个 "Access Denied" 错误，因为来自父框架的 javascript 无法访问子框架的属性来自不同的域。

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

How to set size for an iframe based on its inner content?

html

javascript

css