跨子域的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. TCP粘包拆包场景

    TCP编程底层都有粘包和拆包机制,因为我们在C/S这种传输模型下,以TCP协议传输的时候,在网络中的byte其实就像是河水,TCP就像一个搬运工,将这流水从一端转送到另一端,这时又分两种情况: 1)如 ...

  2. [ 原创 ] Linux下查找指定类型文件以及删除

    find ./ -name "*.lok"   // 查找文件find ./ -name "*.lok" |xargs rm -fr  // 查找文件并删除

  3. 运维自动化工具 Kickstart

    简介: 批量安装操作系统工具之 Kickstart ,RedHat 早前推出的产品( 不多说了,现在都玩 Cobbler 啦 ). 测试环境:CentOS 6.6 x86_64 minimal 一.安 ...

  4. 201671010140. 2016-2017-2 《Java程序设计》java学习第九周

    第七章:<异常,断言和日志>知识点小结       本周,进行了对Java中的异常处理的了解学习,以下是部分所得. 一.未检查异常与已检查异常的区别: 未检查异常处理方法:1.捕获2.继续 ...

  5. 使用OpenSsl自己CA根证书,二级根证书和颁发证书(亲测步骤)

    ---恢复内容开始--- 一.介绍 企业自用, 到证书机构签发证书的费用和时间等都可以省下..... SSl证书的背景功用.......(省略万字,不废话) 可以参考: SSL证书_百度百科 X509 ...

  6. 01-nginx介绍及编译安装

    第一天的时候学过apache,nginx和apache一样都是一个WEB服务器.也就是说你的网站之所以可以在网上运行,总得有一台机器在为你提供服务,这台机器就是服务器.这台服务器通过什么软件在为你提供 ...

  7. Java-精确计算工具类

    import java.math.BigDecimal; import java.math.RoundingMode; /** * 精确计算工具类(加,减,乘,除,返回较大值,返回较小值) */ pu ...

  8. 架构之路：nginx与IIS服务器搭建集群实现负载均衡

    http://blog.csdn.net/zhanghan18333611647/article/details/50811980

  9. 使用 XML-RPC 为 C++ 应用程序启用 Web 服务

    http://www.ibm.com/developerworks/cn/webservices/ws-xml-rpc/ 引言 Internet 现在的受欢迎程度越来越高,由于这个原因及其固有的优势, ...

  10. devcloud 基础架构