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>

  • 相关阅读:
    linux内核中如何访问寄存器?
    uboot加载itb文件后提示"ERROR: new format image overwritten"如何处理?
    如何单独编译Linux内核源码中的驱动为可加载模块?
    openwrt如何打开linux内核的CONFIG_DEVMEM选项?
    openwrt的shell下如何访问寄存器的内容?
    linux系统错误码大全
    第 3 章 文本元素
    第 2 章 基本格式
    第 1 章 HTML5 概述
    第 20 章 项目实战--案例和关于[7]
  • 原文地址:https://www.cnblogs.com/sekon/p/5111601.html
Copyright © 2011-2022 走看看