如何根据内容使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 的特定百分比？

原文由 Anthony Kung 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 中获取所有 iframe，这些 iframe 分配了 .gh-fit 类。然后它从 document.getComputedStyle(iframe) 获取并使用预先计算的宽度和高度样式值，它始终包含该元素的像素完美大小！！！刚刚好！

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

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

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

原文由 geekhunger 发布，翻译遵循 CC BY-SA 4.0 许可协议