zoukankan      html  css  js  c++  java
  • Iframe跨域嵌入页面自动调整高度的办法

    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:

    <iframe id="iframe_shg" src="http://www.c.com/c.html" frameborder="0" width="100%"></iframe>

    ________________________________________________________________

    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)    
        }
    };

    _________________________________________________________________

    C.html

    <body>

    ........................

        <iframe id="myifr" style="display:none" src="http://www.a.com/B.html"></iframe>
        <script type="text/javascript" src="http://www.a.com/D.js"></script>

    </body>

  • 相关阅读:
    javascript时间戳和日期字符串相互转换
    jquery两稳定版本比较~~
    原生的强大DOM选择器querySelector
    分享一个自定义的 console 类,让你不再纠结JS中的调试代码的兼容
    基于Mesos运行Spark
    chrome插件 postman 可以调用restful服务
    cassandra优秀博客集
    Cassandra监控
    Cassandra
    SecureCRT中文显示乱码的解决方法
  • 原文地址:https://www.cnblogs.com/sekon/p/5111601.html
Copyright © 2011-2022 走看看