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>

  • 相关阅读:
    octotree神器 For Github and GitLab 火狐插件
    实用篇如何使用github(本地、远程)满足基本需求
    PPA(Personal Package Archives)简介、兴起、使用
    Sourse Insight使用过程中的常使用功能简介
    Sourse Insight使用教程及常见的问题解决办法
    github 遇到Permanently added the RSA host key for IP address '192.30.252.128' to the list of known hosts问题解决
    二叉查找树的C语言实现(一)
    初识内核链表
    container_of 和 offsetof 宏详解
    用双向链表实现一个栈
  • 原文地址:https://www.cnblogs.com/sekon/p/5111601.html
Copyright © 2011-2022 走看看