Question

我的页面上有一个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的高度。

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

Answer 1

您好，您应该使用resize事件：

我已更新解决方案：

如果我理解正确的话，你不会将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>

让我知道。

Answer 2

您必须在网页上实施onresize活动。看到这个链接。 W3School

window.addEventListener("resize", autoResizeiFrame(document.getElementById("myframe")));

iframe上的100％自动高度

2 个答案: