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>