自动设置 iframe 高度

Posted 2023-03-05

【中文标题】自动设置 iframe 高度

【英文标题】：set the iframe height automatically

【发布时间】：2013-02-21 17:54:44

【问题描述】：

我需要在框架内嵌入一个 html 页面，并使用以下代码：

<iframe src="http://www.google.com" style="width: 90%; height: 300px"
    scrolling="no" margin margin frameborder="0"
    vspace="0" hspace="0">

我正在尝试将高度设置为自动，以便框架自动调整到页面长度，而不必像我在这里所做的那样对高度进行硬编码。我尝试了height:auto 和height:inherit，但没有成功。

【问题讨论】：

您是否尝试过设置height:100%，如果 iframe 在正文中，应该让它填满正文？

【参考方案1】：

如果站点位于不同的域中，由于跨浏览器域的限制，调用页面无法访问 iframe 的高度。如果您可以访问这两个站点，则可以使用document domain hack。那么 anroesti 的链接应该会有所帮助。

【讨论】：

GitHub 上的这个库解决了跨域问题，同时确保 iFrame 在事情发生变化时保持内容大小。 github.com/davidjbradshaw/iframe-resizer

【参考方案2】：

试试这个编码

<div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>

【讨论】：

注意：我发现使用样式高度和宽度是有问题的。高度和宽度属性在这里似乎始终如一地起作用。您同时使用两者有什么原因吗？

% on iframe's height/width is invalid HTML5 as per spec（虽然之前有效）

【参考方案3】：

如果你是像 Bootstrap 这样的框架，你可以使用这个 sn-p 使任何 iframe 视频响应：

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="vid.mp4" allowfullscreen></iframe>
</div>

【参考方案4】：

Solomon 关于引导程序的回答启发我添加引导程序解决方案使用的 CSS，这对我来说非常有效。

.iframe-embed 
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;

.iframe-embed-wrapper 
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;

.iframe-embed-responsive-16by9 
    padding-bottom: 56.25%;

<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="vid.mp4"></iframe>
</div>

【讨论】：

太棒了！我不得不摆脱height: 0;，但除此之外它完美无瑕，这是在旧 gwt 应用程序中可调整大小的模式弹出窗口中托管的 iframe 中的角度页面！

适用于当前的 Chrome 2020 年 9 月。谢谢。