我看到很多人问如何使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
的特定百分比?
4条答案
按热度按时间ttisahbt1#
只是想分享我的解决方案和兴奋。我花了整整四天的时间进行深入的研究和失败,但我认为我已经找到了一种使iframe完全响应的简洁方法!耶!
我尝试了很多不同的方法...我不想像
postMessage
那样使用双向通信隧道,因为它对于同源来说很尴尬,对于跨源来说很复杂(因为没有管理员愿意代表你打开大门并实现它)。我试过使用MutationObservers,但仍然需要几个EventListeners(resize,click,..)来确保布局的每次更改都得到正确处理。- 如果脚本切换元素的可见性怎么办?或者,如果它按需动态预加载更多内容呢?- 另一个问题是从某处获取iframe内容的准确高度。大多数人建议使用
scrollHeight
或offsetHeight
,或使用Math.max
组合使用。问题是,直到iframe元素更改其维度,这些值才会更新。要实现这一点,您可以在抓取scrollHeight
之前简单地重置iframe.height = 0
,但还有更多的警告。去他的吧然后,我有了另一个想法,用
requestAnimationFrame
来实验,以摆脱我的事件和观察者地狱。现在,我可以立即对每个布局更改做出React,但我仍然没有可靠的来源来推断iframe的内容高度。然后我偶然发现了getComputedStyle
!这是一种顿悟!一切都很顺利。好吧,看看我从无数次尝试中最终提炼出来的代码。
就是这样没错- 在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。然后,它从document.getComputedStyle(iframe)
中获取并使用预先计算的宽度和高度样式值,这些值总是包含该元素的像素完美大小!完美!注意,这个解决方案不能跨源工作(其他任何解决方案也不能,没有像IFrameResizer这样的双向通信策略)。JS无法访问iframe的DOM,如果它不属于你。
我能想到的唯一其他跨域解决方案是使用https://github.com/gnuns/allorigins这样的代理。但这将涉及到深度复制你提出的每个请求-换句话说,你“窃取”整个页面源代码(使其成为你的并让JS访问DOM),你修补这个源代码中的每个链接/路径,这样它也会通过代理。重新连接的程序是一个坚韧的,但可行的。
我可能会尝试自己在这个跨域的问题,但这是另一天。享受代码!:)
ugmeyewa2#
没有CSS唯一的方法来根据其内容设置iframe高度。您需要使用JavaScript获取iframe内容高度,然后设置为iframe高度。
如何使用JavaScript实现这一点,在以下问题中得到了回答和解释:
vwkv1x7d3#
尝试将
position
设置为fixed
,如下所示:或者像这样:
dfuffjeb4#
给你的iframe分配一个自定义的id,然后你就可以将它设置为vw或vh。