在前端开发中,iframe
经常被用来实现异步加载内容以及跨域资源共享等功能,但是如果 iframe
内容高度不确定,就可能会出现 iframe
页面滚动不完整的问题,影响用户体验。针对这个问题,我们可以通过一些技巧,实现 iframe
根据其内容自适应高度的目的。
一、设置 iframe
高度
在 iframe
没有设置高度时,其默认高度是 150 像素。我们可以通过 CSS 属性设置 iframe
高度为 100% 实现全屏显示,但是这样设置后,iframe
页面会超出父级元素的高度。
二、使用 JS 获取 iframe
内容高度
<iframe id="myIframe" src="https://www.example.com"></iframe> <script> var iframe = document.getElementById("myIframe"); var height = iframe.contentWindow.document.documentElement.scrollHeight; </script>
当我们在父级页面中通过 JS 获取 iframe
页面中的内容高度时,无法直接访问 iframe
内部的 DOM 元素。这是因为安全限制,浏览器不允许我们访问其他域名的页面。
解决方案是使用 contentWindow
属性来间接访问 iframe
内部的 DOM。通过 contentWindow.document
访问iframe
页面内部的 DOM,再获取其高度。
上面的代码中,我们使用 document.documentElement.scrollHeight
获取到了 iframe
内容的滚动高度。
三、设置 iframe
高度为内容高度
<iframe id="myIframe" src="https://www.example.com" onload="iframeLoaded()"></iframe> <script> function iframeLoaded() { var iframe = document.getElementById("myIframe"); var height = iframe.contentWindow.document.documentElement.scrollHeight; iframe.style.height = height + "px"; } </script>
我们通过上一步获取到了 iframe
内容的高度,现在我们只需要将 iframe
元素的高度设置为获取到的高度值即可。
但是,直接在 JS 中设置 iframe
的高度时,会出现一闪一闪的效果,因为内容高度会在加载完后才会获取到,设置高度不是瞬间完成的。为了避免这个问题,我们可以使用 onload
事件,在 iframe
加载完成后再设置高度。
四、动态更新 iframe
高度
<iframe id="myIframe" src="https://www.example.com" onload="iframeLoaded()"></iframe> <script> function iframeLoaded() { var iframe = document.getElementById("myIframe"); var height = iframe.contentWindow.document.documentElement.scrollHeight; iframe.style.height = height + "px"; } setInterval("updateIframeHeight()", 200); function updateIframeHeight() { var iframe = document.getElementById("myIframe"); var height = iframe.contentWindow.document.documentElement.scrollHeight; iframe.style.height = height + "px"; } </script>
在某些情况下,iframe
内容的高度可能会发生动态变化,例如输入框随着输入内容的变化扩张。此时,我们需要动态获取 iframe
的高度,并重新设置 iframe
的高度。
我们可以使用 setInterval
来定时获取 iframe
的高度,并更新内容高度。在这里,我们设定 200 毫秒的间隔,用于获取 iframe
的高度并更新。
五、小结
通过上述技巧,我们可以轻松地实现 iframe
根据内容自适应高度的效果。然而,在使用 iframe
时,我们也需要注意到一些潜在的问题,例如跨域访问,iframe
内部的事件监听等等。希望本文对大家有所帮助。