ifream高度只适应解决方案

IFrame自适应高度

最新推荐文章于 2019-12-09 14:05:28 发布

原创最新推荐文章于 2019-12-09 14:05:28 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ifream #高度自适应

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现IFrame元素自适应高度的方法。该方法确保IFrame内容完全显示而不会出现滚动条，同时提供了良好的用户体验。文章还强调了IFrame属性设置的重要性。

html代码：
<iframe src="/seller/goods/list" scrolling="no" onload="setIframeHeight(this)" id="bodyCenter" name="workspace" frameborder="0" width="100%" height="100%" style="min-height:800px;" ></iframe>

js代码
function setIframeHeight(iframe) {
    if (iframe) {
    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    if (iframeWin.document.body) {
       iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
    }
    }
};

注意一下几点：1.iframe 的scrolling="no"一定要设置好，不发生先出现滚动条在消失的情况。
            2.如果ifream有默认高地可以设置height="100%" style="min-height:800px;"