Iframe 高度自适应

2019-01-22 02:00:13来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 (需要只有iframe出现滚动条)

        function iframeAutoFit(iframeObj) {
            setTimeout(function () {
                if (!iframeObj) return;
                iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight);
            }, 200)
        }

  下面是我的Iframe

        <iframe id="MainIframe" onload="iframeAutoFit(this)" name="rightContent" src="@Url.Action("Content","Home")" class="main" frameborder="0" scrolling="no" style="min-height:1000px;"></iframe>

这样可以解决,但是有一个问题,刚加载进来时高度可以正确显示,但是嵌入内容的高度随点击变化(如:下拉菜单,左侧导航栏,上传显示图片等)Iframe高度不会自动适应,为了解决这个问题,我又去搜了一圈,包括在园子里看了一圈也没真正解决,后来仔细想想咱们这样写的是在Iframe加载的是改变的高度,可是我们的内容是在加载以后改变的,应该定一个计时器去随时监测我们的页面高度是否改变了!于是我把上面的方法改了下完美解决问题了。

        function iframeAutoFit(iframeObj) {
            setInterval(function () {
                if (!iframeObj) return;
                iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight);
            }, 200)
        }

  虽然是个小问题,但是发现网上搜的方法都没解决我的问题,于是写出来分享给大家,不知道解决你的问题没有呢?

 


原文链接:https://www.cnblogs.com/yoo104/p/10299907.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:原生JS实现随着鼠标滚动到元素位置触发对应css3动画,简单易用滚

下一篇:为链表数据结构实现iterator接口