Question

我有一个iframe，它的高度可变，这是事先未知的。

当前，如果iframe加载的区域太小，则iframe会加载内部滚动条（example）。如果iframe恰好是较短的iframe，则在页脚开始之前{example），iframe下方将有空白空间。

有没有针对此类问题的解决方案？

Answer 1

参考我的评论。您需要解决的第一件事是跨源问题。如果响应中的交叉来源允许标头中不包含当前主机，则大多数浏览器都会阻止对其他网站的请求。因此，在您的情况下，从您的请求到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 的文档会被拒绝，并显示

之类的错误

VM747：1未捕获的DOMException：阻止了源为“ http://159.89.229.184”的帧访问跨域帧。

我还以毛刺为例，演示了它的工作原理（单击“显示”以查看实际效果）

https://glitch.com/edit/#!/iframe-varialbe-height

Answer 2

按照 @ relief.melone 的建议，添加简单的JS代码以获取iframe内容高度并设置容器高度即可。

其他可能有帮助的简单解决方案，作为替代方案： https://github.com/davidjbradshaw/iframe-resizer

Answer 3

我遇到了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

Answer 4

在第二个示例中添加的iframe中，css属性min-height为1600px。使用百分比作为最小高度或高度来解决此问题。新增最低高度：275vh；它解决了这个问题。

.job-detail-iframe iframe{
    width: 100%;
    min-height: 275vh;
}

也请检出this作为参考。

当iframe高度可变时嵌入iframe

4 个答案: