iframe上的100%自动高度

100% auto height on iframe

本文关键字：高度 100% 上的 iframe      更新时间：2023-09-26

我的页面上有一个iframe，我使用的代码是：

<script>
    function autoResizeiFrame(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }
    </script>
    <iframe src="link.php" frameborder="0" width="100%" height="100%" onload='javascript:autoResizeiFrame(this);'></iframe>

其自动将iframe的大小调整为100%的高度。

这很好，但如果重新调整浏览器的大小，使屏幕宽度变小，我可以看到iframe边界，并且不会自动重新调整iframe的高度。

它只是在页面加载时重新调整大小

嗨，您应该使用调整大小事件：

我已经更新了解决方案：

如果我理解正确，你习惯于iframe的内容不滚动并完全消除显示。。。。比这更有效。。。（我希望…）

<script type="text/javascript">
function autoResizeiFrame(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + "px";
}
window.addEventListener("load",function(){
    var obj=document.getElementById("myIframe");
    obj.contentWindow.addEventListener("resize",function(){autoResizeiFrame(obj);},false);
    autoResizeiFrame(obj);
},false);
</script>
<iframe id="myIframe" src="index.php" frameborder="3" width="100%" height="100%" style="border:2px solid red;"></iframe>

让我知道。

您必须在页面上实现onresize事件。请参阅此链接。W3学校

window.addEventListener("resize", autoResizeiFrame(document.getElementById("myframe")));
相关文章：