我有一个高度可变的 iframe，这是事先不知道的。
目前，如果 iframe 加载的部分太小，则 iframe 会使用内部滚动条加载。如果 iframe 恰好是较短的 iframe，则在页脚开始之前 iframe 下方有空白区域。
这类问题有解决方案吗？
【问题讨论】：
好吧，按照 @relief.melone 的建议，添加简单的 JS 代码来获取 iframe 内容高度并设置容器高度即可。
其他可以提供帮助的简单解决方案，作为替代方案： https://github.com/davidjbradshaw/iframe-resizer
【讨论】：
参考我的评论。您必须解决的第一件事是您的跨源问题。如果响应在其跨源允许标头中不包含当前主机，大多数浏览器将阻止对其他网站的请求。因此，在您的情况下，从您的请求到 iframe 内容的标头需要包含标头
Access-Control-Allow-Origin: http://159.89.229.184
和
Access-Control-Allow-Mehtods: GET
有关更多信息，另请参阅https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing。
现在来看看实际的解决方案。
您需要确定 iframe 内容的高度，然后相应地设置高度。您可以通过添加 javascript 函数来做到这一点。在你的头部添加
<script>
const setHeight = (frame) => {
frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`
}
</script>
并且您的 iframe 需要包含 onload 事件
<iframe ... scrolling="no" onload="setHeight(this)" />
这应该可以解决您的问题。但正如我提到的，如果您允许跨源访问。否则，您访问 frame.contentWindow 的 document 将被拒绝，并出现类似
的错误VM747:1 Uncaught DOMException: Blocked a frame with origin "http://159.89.229.184" from access cross-origin frame.
我还做了一个关于故障的例子来演示它是如何工作的（点击显示查看它的实际效果）
【讨论】：
我遇到过 iFrame 内容的高度动态变化的情况，我告诉父框架（包含 iFrame）使用 postMessage 相应地改变它的高度：像这样
父窗口：
<section class="module">
<div class="row">
<!-- Content column start -->
<div class="col-sm-12" id="web-version-container">
<iframe id="web-version-frame" src="index.html" allowfullscreen=false frameborder="0" style="width:100%; height:100%;min-height:800px;">
</iframe>
</div>
</div> <!-- .row -->
</section>
<script>
window.addEventListener('message', function(event) {
// IMPORTANT: Check the origin of the data!
if (~event.origin.indexOf('https://yourdomain.com')) {
// The data has been sent from your site
if (event.data.messageName) {
switch (event.data.messageName) {
case "documentHeight":
if (event.data.messageValue && parseInt(event.data.messageValue) > 500);
var newHeight = parseInt(event.data.messageValue) + 50;
$("#web-version-frame").css("height",newHeight.toString() + "px");
break;
}
}
// The data sent with postMessage is stored in event.data
} else {
// The data hasn't been sent from your site!
// Be careful! Do not use it.
return;
}
});
</script>
子窗口：
if (window.parent) {
window.parent.postMessage(
{
messageName: "documentHeight",
messageValue: $(".content-active").height()
},
"*"
);
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
【讨论】：
在您在第二个示例中添加的 iframe 中，css 属性 min-height 为 1600px。使用最小高度或高度的百分比来解决问题。添加了最小高度：275vh；它解决了这个问题。
.job-detail-iframe iframe{
width: 100%;
min-height: 275vh;
}
检查this 也可以作为参考。
【讨论】：