欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Iframe 高度自适应

程序员文章站 2022-05-17 14:50:29
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 (需要只有iframe出现滚动条) 刚开始以为是很小的问题一直没注意,但是经常页面比较高的只能显示一半,后来也在网上搜了很多解解办法,一直没真正解决,下面是我在网上搜到的方法: 下面是我 ......

 实现 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)
        }

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