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

2017-10-13 1033 0 编辑:深正互联 来源:互联网

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>固定的容器中iframe宽高100%撑满容器,iframe超出部分出现滚动条http://www.51xuediannao.com/html5/981.html</title>

</head>

<body>

    <div 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>

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

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


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联