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

Question

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

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

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

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

Answer 1

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

请参阅： 使用 JavaScript 创建 IFRAME

并且： 让iframe自动根据内容调整高度而不使用滚动条？

此外， lang 属性似乎首先是罪魁祸首。

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

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

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