zoukankan      html  css  js  c++  java
  • 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;
                100%
            }
        </style>
    </head>
    
    <body>
        <iframe src="./index1.html" frameborder="0" id="ifr"></iframe>
    </body>
    </html>
    
    <!doctype html>
    <html>
    <head>
        <title>hello</title>
        <style>
            #one {
                 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>
    
  • 相关阅读:
    vb 动态添加 timer
    sruts2 国际化 规范
    vb 创建xml
    robots
    android 桌面斗地主
    QT 平台
    云软件 Eucalyptus云
    android intentfilter
    android 布局相关
    Zend Studio PHP
  • 原文地址:https://www.cnblogs.com/kzwrcom/p/6386365.html
Copyright © 2011-2022 走看看