根据 iframe 中的内容调整容器高度

Question

我正在尝试找出如何根据内容动态调整 iframe 高度。我不想在移动设备上看到 iframe 的滚动行为，这对用户体验不太友好。 我尝试将高度设置为 100%，但没有任何改变。

这是页面，您可以看到我在说什么 https://flypont.com/a320-basic-2 （这是你可以点击“Scegli giorno e ora”或“data aperta”的部分。下面的内容是一个iframe。这是代码：

<iframe id="calendario" src="https://app.acuityscheduling.com/catalog.php?owner=31548557&amp;category=A320+Basic" width="100%" height="1000px" frameborder="0"></iframe>

如何进行定制？

我尝试过，但没有结果。

<script>
   var iframe = document.getElementById("calendario");
   iframe.width = iframe.contentWindow.document.body.scrollWidth;
   iframe.height = iframe.contentWindow.document.body.scrollHeight;
</script>

Answer 1

document.addEventListener('DOMContentLoaded', function() {
    const iframes = document.querySelectorAll('iframe');
    if (iframes && iframes.length) {
        iframes.forEach(iframe => {
            iframe.addEventListener('load', function() {
                const content = (this.contentWindow || this.contentDocument);
                if (content && content.document) {
                    this.height = '';
                    this.height = content.document.body.scrollHeight + 'px';
                }
            });
        });
    }
});

但是，它不支持跨域。

也许你可以使用这个包。跨域 iframe 大小调整问题在这里解决： https://github.com/davidjbradshaw/iframe-resizer