找不到自动调整 iframe 大小以适应其内容的方法

Question

我正在重构我的个人网站，它是一个投资组合，我想根据用户想要查看的项目加载不同的页面，并且在 iframe 中加载子页面时遇到问题。我已经测试了一堆不同的 javascripts 和 css 方法来自动检测子页面的高度，但是我正在测试的所有东西似乎都无法读取子页面的高度，或者与设置 height="100%" 的效果相同iframe，它只填充父 div 而不是扩展它。

这是我目前得到的：

在头脑中：

<script>
    function resizeIframe(obj) { 
        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';          
    }
</script>

我的 iframe：

<iframe sandbox="allow-same-origin allow-scripts" lang="en" src="subpage.html" allowTransparency="true" scrolling="no" frameborder="0" width="100%" onload="resizeIframe(this)"></iframe>

有人可以帮我吗？我错过了什么吗？

P.S：我在网页设计和编程方面都是自学成才的，所以我的问题可能很愚蠢，或者我遗漏了一些明显的东西......对不起，如果是这样的话：/

P.S 之二：我知道 iframe 的使用并不总是最好的，但就我而言，它允许我非常轻松地集成和维护网页，因为我只需要从我设置的包含所有内容的 Notion 导出我的页面来自我的网站子页面，瞧……无需自己创建网站的所有子页面，维护起来非常容易

Answer 1

动态创建 iframe 元素解决了这个问题。

见：Creating an IFRAME using JavaScript

还有：Make iframe automatically adjust height according to the contents without using scrollbar?

lang 属性似乎也是罪魁祸首。

关于为什么 iframe 没有按预期响应 HTML lang 属性也不是很清楚。也许这只是这个项目的情况？

在这里您可以找到有关 iframe https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe 及其属性的信息。

这里有关于全局 HTML 属性的信息...https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes。