如何根据其内容使 iframe 100% 高度

Question

我见过很多人问如何使 iframe 100% 高度。可以使用一些 CSS 轻松存档。它将使 iframe 相对于设备屏幕显示 100%。但是如何根据其内容使 iframe 100% 高度？

这是我当前根据设备屏幕制作 100% iframe 的代码：

        iframe {
        display: block;
        background: #000;
        border: none;
        height: 100vh;
        width: 100vw;
    }

    <iframe src="https://...">Your Browser Does Not Support iframes!</iframe>

在allowfullscreen和position:absolute没有除了撞毁我的网站模板的帮助。这是我在不破坏主 CSS 的情况下能做的最好的事情。请帮忙...

编辑：iframe 内容响应使用

<meta name="viewport" content="width=device-width,initial-scale=1">

所以使用javascript预设高度也不起作用。也许有一种使用高度单位的方法？

em, ex,rem等等？或者使它成为特定的百分比vw？

Answer 1

只是想分享我的解决方案和兴奋。我花了整整四天的深入研究和失败，但我想我找到了一种使 iframe 完全响应的巧妙方法！耶！

我尝试了很多不同的方法......我不想使用双向通信隧道，postMessage因为它对于同源和跨源很复杂（因为没有管理员想要打开门并在代表你）。

我已经尝试使用 MutationObservers，但仍然需要几个 EventListeners（调整大小、单击等）来确保正确处理布局的每个更改。- 如果脚本切换元素的可见性怎么办？或者如果它按需动态​​预加载更多内容呢？- 另一个问题是从某处获取 iframe 内容的准确高度。大多数人建议使用scrollHeight或offsetHeight，或将其组合使用Math.max。问题是，在 iframe 元素更改其尺寸之前，这些值不会更新。要实现这一点，您可以简单地iframe.height = 0在抓取 之前重置scrollHeight，但对此还有更多警告。所以，拧这个。

然后，我有另一个想法可以尝试requestAnimationFrame摆脱我的事件和观察者的地狱。现在，我可以立即对每个布局更改做出反应，但我仍然没有可靠的来源来推断 iframe 的内容高度。然后我偶然发现getComputedStyle了！这是一个启示！一切都刚刚点击。

好吧，看看我最终可以从无数次尝试中提取的代码。

function fit() {
    var iframes = document.querySelectorAll("iframe.gh-fit")

    for(var id = 0; id < iframes.length; id++) {
        var win = iframes[id].contentWindow
        var doc = win.document
        var html = doc.documentElement
        var body = doc.body
        var ifrm = iframes[id] // or win.frameElement

        if(body) {
            body.style.overflowX = "scroll" // scrollbar-jitter fix
            body.style.overflowY = "hidden"
        }
        if(html) {
            html.style.overflowX = "scroll" // scrollbar-jitter fix
            html.style.overflowY = "hidden"
            var style = win.getComputedStyle(html)
            ifrm.width = parseInt(style.getPropertyValue("width")) // round value
            ifrm.height = parseInt(style.getPropertyValue("height"))
        }
    }

    requestAnimationFrame(fit)
}

addEventListener("load", requestAnimationFrame.bind(this, fit))

就是这样，是的！- 在您的 HTML 代码中写入<iframe src="page.html" class="gh-fit gh-fullwidth"></iframe>. 这gh-fit是一个伪造的 CSS 类，用于识别 DOM 中的哪些 iframe 元素应该受脚本影响。这gh-fullwidth是一个带有一个规则的简单 CSS 类width: 100%;。

上面的脚本会自动从 DOM 中获取所有.gh-fit分配了类的iframe 。然后它抓取并使用预先计算好的宽度和高度的样式值 from document.getComputedStyle(iframe)，它总是包含该元素的像素完美尺寸！！！刚刚好！

请注意，此解决方案不适用于跨域（也没有任何其他解决方案，没有像 IFrameResizer 这样的双向通信策略）。JS 根本无法访问 iframe 的 DOM，如果它不属于您的话。

我能想到的唯一其他跨域解决方案是使用像https://github.com/gnuns/allorigins这样的代理。但这将涉及深度复制您提出的每个请求 - 换句话说 - 您“窃取”整个页面源代码（使其成为您的并让 JS 访问 DOM）并修补此源中的每个链接/路径，以便它也通过代理。重新链接例程是一个艰难的过程，但可行。

我可能会尝试解决这个跨域问题，但那是另一天。享受代码！:)

Answer 2

没有 CSS 唯一的方法可以根据其内容设置 iframe 高度。您需要使用 JavaScript 获取 iframe 内容高度，然后设置为 iframe 高度。

如何使用 JavaScript 实现这一点在以下问题中得到了回答和很好的解释：

1. 让iframe根据内容自动调整高度而不使用滚动条？

2. 根据内部内容使 iframe 高度动态化 - JQUERY/Javascript

3. 使用 Jquery 将 iframe 调整为内容

4. 调整 iframe 的宽度高度以适应其中的内容

5. 跨域 iframe 调整器？

Answer 3

尝试设置position为fixed，如下所示：

height: 100%;
width: 100%;
position:fixed;

或者像这样：

height: 100vh;
width: 100vw;
position:fixed;