Iframe跨域嵌入页面自动调整高度的办法

最新推荐文章于 2019-08-05 11:23:36 发布

aizhanfen6485

最新推荐文章于 2019-08-05 11:23:36 发布

阅读量201

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sekon/p/5111601.html

版权

http://www.a.com/A.html

http://www.a.com/B.html

http://www.a.com/D.js

http://www.c.com/C.html

A.html:

________________________________________________________________

B.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>B.html</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            var isSet = false
            var inteval = setInterval(function() {
                var search = location.search.replace('?', '')
                if (isSet) {
                    clearInterval(inteval)
                    return
                }
                if (search) {
                    var height = search.split('=')[1]
                    var doc = parent.parent.document
                    var ifr = doc.getElementById('iframe_shg')
                    ifr.style.height = height + 'px'
                    isSet = true
                }
            }, 500)
        }
    </script>
</body>
</html>

________________________________________________________________

D.js

// 计算页面的实际高度，iframe自适应会用到
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 doc = document
    var height = calcPageHeight(doc)
    var myifr = doc.getElementById('myifr')
    if (myifr) {
        myifr.src = 'http://www.a.com/B.html?height=' + height
        // console.log(doc.documentElement.scrollHeight)
    }
};