解决iframe自适应高度问题
解决iframe自适应高度问题
旺仔没馒头 发表于3个月前
解决iframe自适应高度问题
  • 发表于 3个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

        在页面中,经常使用iframe来展示某一块的区域內容,但是为了消除iframe的滚动条,让嵌入iframe的页面看起来更加自然,需要iframe自动适应內容高度,经过我的实验,发现下面代码能够很好的解决问题。

iframe代码

<iframe frameborder="0" width="100%"src="${ctx}/business/standard/list" scrolling="no"
id="myframe" ></iframe>

以下是调整大小的核心代码,在window.onload方法中调用即可。

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;
        }
    }
}

        假如我们iframe的高度要随着子页面的內容变化而变化,那么需要设置一个定时器,来不停地去改变iframe的高度。

window.setInterval("setIframeHeight(document.getElementById('myframe'))", 200);
共有 人打赏支持
粉丝 2
博文 10
码字总数 7962
×
旺仔没馒头
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: