Iframe 高度自适应 example （跨子域实现）

跨子域的iframe高度自适应

比如 'https://www.kzwr.com/topics/baidu' 嵌入了 'http://pan.kzwr.com/'，这种跨子域的页面,实现起来也比较简单，看下面的详细代码：

<!doctype html>

<html >

<head>

    <title>iframe 自适应高度测试</title>

    <style>

        iframe{

            background-color:aquamarine;

            width:100%

        }

    </style>

</head>

<body>

    <iframe src="./index1.html" frameborder="0" id="ifr"></iframe>

</body>

</html>

<!doctype html>

<html>

<head>

    <title>hello</title>

    <style>

        #one {

            width: 100px;

            height: 1110px;

            background-color: #ff6a00;

        }

    </style>

</head>

<body>

    <div id="one">

    </div>

    <script>

        // 计算页面的实际高度，iframe自适应会用到

        //www.kzwr.com 欢迎朋友们前来交流

        function calcPageHeight(doc) {

            var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

            var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

            var height = Math.max(cHeight, sHeight)

            return height

        }

        window.onload = function () {

            var height = calcPageHeight(document)

            parent.document.getElementById('ifr').style.height = height + 'px'

        }

    </script>

</body>

</html>

巴特西

Iframe 高度自适应 example （跨子域实现）

跨子域的iframe高度自适应

最新文章

热门文章