Question

我见过很多人都在问如何让iframe达到100％的身高。这可以使用一些CSS轻松存档。它将使iframe显示100％相对于设备屏幕。但如何根据其内容制作iframe 100％的高度？

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

＆＃13;

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

＆＃13;

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

＆＃13;

allowfullscreen和position:absolute除了崩溃我的网站模板外没有任何帮助。这是我可以做的最好的，不会崩溃主CSS。请帮忙......

修改：iframe内容使用

响应

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

所以使用javascript的预设高度也没有用。也许有一种方法可以使用高度单位吗？

em，ex，rem等？或者将其设为vw的特定百分比？

Answer 1

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

如何使用JavaScript解决这个问题，并在以下问题中做了很好的解释：

Answer 2

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

我尝试了许多不同的方法...我不想像postMessage那样使用双向通讯隧道，因为它对于相同来源的代码来说很尴尬，而对于跨来源的代码来说却很复杂（因为没有管理员希望打开大门并代表您实施此操作。

我尝试使用MutationObservers，但仍然需要几个EventListener（调整大小，单击..），以确保正确处理布局的每个更改。 -如果脚本切换元素的可见性怎么办？还是动态地按需预加载更多内容呢？ -另一个问题是从某处获取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是带有一个规则width: 100%;的简单CSS类。

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

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

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

我可能会尝试解决这个跨源问题，但这是另一天的事情。享受代码！：）

Answer 3

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

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

或者像这样：

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

如何根据内容

3 个答案: