知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    iframe高度自适应里面的内容怎么实现?

    作者:佳明妈 来源:懒人建站 2016-08-09 人气:
    固定的容器中iframe宽高100%撑满容器,iframe超出部分出现滚动条,iframe高度有多少,容器高度就有多少,iframe 自适应高度里面内容

    iframe高度自适应里面的内容怎么实现?

    一、固定的容器中iframe宽高100%撑满容器,iframe超出部分出现滚动条

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>固定的容器中iframe宽高100%撑满容器,iframe超出部分出现滚动条http://www.51xuediannao.com/html5/981.html</title>
    </head>
    <body>
        <div class="test" style="width: 100%;height: 500px;">
            <iframe src="iframe.html" frameborder="none" scrolling="auto" style="width: 100%; height: 100%;"></iframe>
        </div>
    </body>
    </html>
    

    二、iframe高度有多少,容器高度就有多少,iframe高度自适应里面的内容

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>iframe高度有多少,容器高度就有多少http://www.51xuediannao.com/html5/981.html</title>
        <style>
            html,body{ padding: 0; margin: 0;}
        </style>
    </head>
    <body>
        <div class="test" id="test"  style="width: 100%;">
            <iframe name="ifr" id="ifr" src="iframe.html" frameborder="none" scrolling="auto" style="width: 100%; height: 100%;"></iframe>
        </div>
        <script>
            function test(h){
                document.getElementById("test").style.height = h+"px"
            }
            //在父级操作容器高度,这有个问题就是在iframe中的页面有高度改变的时候这里并不会改变
            /*document.getElementById("ifr").onload = function(){
                document.getElementById("test").style.height = this.contentWindow.document.body.clientHeight+"px";
            };*/
        </script>
    </body>
    </html>
    子iframe中的js代码
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,body,ol{ margin: 0; padding: 0;}
            li{ line-height: 30px;}
            li:nth-of-type(even){ background: #ddd;}
        </style>
    </head>
    <body>
    <div id="test">test</div>
    <div style="height: 2000px; background: #ddd;"></div>
    <script>
        function setHeight(){
            var h = document.body.clientHeight;
            window.parent.test(h);
        }
        setHeight();
        //页面高度有改变的时候再次调用 setHeight 重置外层容器的高度http://www.51xuediannao.com/html5/981.html
        document.getElementById("test").onclick = function(){
            this.style.height = "500px";
            setHeight();
        }
    </script>
    </body>
    </html>
    还有其他办法吗?

    ↓ 查看全文

    iframe高度自适应里面的内容怎么实现?由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    iframe高度自适应里面的内容怎么实现?-最新评论

    • 11 2017-03-02 12:03:48
      我试一下灵不灵
    • 素材火 2017-03-02 12:51:48
      我试一下灵不灵
    • 懒人建站网友 2016-10-31 09:57:19
      这个更刺c激,准备好手纸哦 A 片。。 288d.pw [给力]
    • Jquery特效 2016-09-14 08:43:35
      注意:这个iframe 自适应高度解决方案是不能跨域使用的
    • Jquery特效 2016-09-14 08:25:24
      这个iframe 自适应高度js代码实现很好,通过iframe链接的页面内部js来获取内部页面高度,然后调用父页面的的js函数重设iframe的高度
    • 11 2016-09-14 08:09:35
      注意:这个iframe 自适应高度解决方案是不能跨域使用的
    • 11 2016-09-14 08:09:24
      这个iframe 自适应高度js代码实现很好,通过iframe链接的页面内部js来获取内部页面高度,然后调用父页面的的js函数重设iframe的高度