跨子域的iframe高度自适应

比如 'https://www.kzwr.com/topics/baidu' 嵌入了 'http://pan.kzwr.com/'，这种跨子域的页面,实现起来也比较简单，看下面的详细代码：

<!doctype html>

<html >

<head>

    <title>iframe 自适应高度测试</title>

    <style>

        iframe{

            background-color:aquamarine;

            width:100%

        }

    </style>

</head>

<body>

    <iframe src="./index1.html" frameborder="0" id="ifr"></iframe>

</body>

</html>

<!doctype html>

<html>

<head>

    <title>hello</title>

    <style>

        #one {

            width: 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>

Iframe 高度自适应 example （跨子域实现）的更多相关文章

  1. 跨子域的iframe高度自适应

    一.跨子域的iframe高度自适应 比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html',这种跨子域的页面 3.html 1 2 3 4 5 6 7 8 9 10 11 ...

  2. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  3. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  4. 跨域iframe高度自适应（兼容IE/FF/OP/Chrome）

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  5. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  6. CSS完美实现iframe高度自适应（支持跨域）

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  7. Iframe高度自适应（兼容IEFirefox、同域跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  8. Iframe高度自适应（兼容IE/Firefox、同域/跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  9. iframe高度自适应

    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...

随机推荐

  1. mysql 里的 ibdata1 文件不断的增长

    我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题.当监控服务器发送一个关于 MySQL 服务器存储的报警时,恐慌就开始了 —— 就是说磁盘快要满了.一番调查 ...

  2. 本地YUM仓库搭建实战

    YUM主要用于自动安装.升级rpm软件包,它能自动查找并解决rpm包之间的依赖关系.要成功的使用YUM工具安装更新软件或系统,就需要有一个包含各种rpm软件包的repository(软件仓库),这个软 ...

  3. Octave中调用hist出现broken pipe some output may be lost octave的解决（Mac）

    参考:http://octave.1599824.n4.nabble.com/Mac-OS-X-Mountain-Lion-Octave-can-not-execute-sombrero-td4643 ...

  4. 记一则css3计算

    .Head{ background-image: url("../../Img/PersonalCenter/banner.png"); background-repeat: no ...

  5. 第一章IP：网际协议

    I P是T C P / I P协议族中最为核心的协议.所有的 T C P.U D P.I C M P及I G M P数据都以I P数据报格式传输(见图 1 - 4).许多刚开始接触 T C P / I ...

  6. Mysql 中的伪列用法1

    SELECT ( @rowNO := @rowNo + 1 ) AS rowno, A.*FROM ( SELECT * FROM t_user ) a, ( SELECT @rowNO := 0 ) ...

  7. ros ddns

    ROS5X-6X脚本(10-15分钟执行一次) #DDNS本站帐号 :global ddnsuser "用户名" #DDNS本站密码 :global ddnspass " ...

  8. jquery 报错 Uncaught TypeError: Illegal invocation

    遇到这个错误 请检查你的ajax提交方法的参数 1 参数是否都有定义 2 参数个数是否一致 3参数是否都有值(******)

  9. c++ 享元模式（flyweight）

    举个围棋的例子,围棋的棋盘共有361格,即可放361个棋子.现在要实现一个围棋程 序,该怎么办呢?首先要考虑的是棋子棋盘的实现,可以定义一个棋子的类,成员变量包括棋子的颜色.形状.位置等信息,另外再定 ...

  10. python-nmap模块常用方法说明

    一.模块常用方法说明 本节介绍python-nmap模块的两个常用类,一个为PortScanner()类,实现一个nmap工具的端口扫描功能封装:另一个为PortScannerHostDict()类, ...