跨子域的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. Python小知识点（2）

    1.简述Python的运行过程 在说这个问题之前,我们先来说两个概念,PyCodeObject和pyc文件. 我们在硬盘上看到的pyc自然不必多说,而其实PyCodeObject则是Python编译器 ...

  2. python找寻合适的日志库logging Handler——Handler自定义实现

    最近在用python tornado开发一个app的服务端.投产的系统肯定需要包含日志功能,这里就自然想到了用python自带的logging库.   logging中日志内容的输出都交由Handle ...

  3. Oracle11gR2--手工建库&dbca建库

    1 Oracle11gR2 dbca建库 [oracle@localhost ~]$ cd $ORACLE_BASE/database [oracle@localhost database]$ dbc ...

  4. Android 判断字符串是否相等

    判断两个String是否相等不能直接用== 或!=,需要用equals()判断,若相等,则返回1 判断TextView中文字是否相等: TextView A,B; if (A.getText().to ...

  5. 双 MySQL 启动、停止脚本

    5.5 启动 #!/bin/bash # author: Wang Xiaoqiang # func: Start MySQL 5.5 pid=`netstat -lnpt | awk -F '[ / ...

  6. MongoDB常用增删改查语句

    数据库database 创建及查看库 1.有则使用这个数据库,没有就创建 use DATABASE_NAME 2. 查看当前选择的数据库,默认是test db 3.查看数据库,默认有admin.loc ...

  7. SPI子系统分析之四:驱动模块

    内核版本:3.9.5 SPI控制器层(平台相关) 上一节讲了SPI核心层的注册和匹配函数,它是平台无关的.正是在核心层抽象了SPI控制器层的相同部分然后提供了统一的API给SPI设备层来使用.我们这一 ...

  8. 阿里巴巴Java开发规约扫描插件－Alibaba Java Coding Guidelines 在idea上安装使用教程

    经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的<阿里巴巴Java开发规约>扫描插件!该插件由阿里巴巴P3C项目组研发.P3C是世界知名的反潜机,专门对付 ...

  9. 10 华电内部文档搜索系统 search02

    搜索项目并不是一个很大的项目,在实际项目中往往是作为子项目和别的项目集成在一起的.比如说和OA项目集成在一起,作为另外一个项目的子系统来使用.搜索项目的功能并不复杂. 整个项目是文档搜索项目,如题:企 ...

  10. Nginx源码完全注释（4）ngx_queue.h / ngx_queue.c

    队列头文件ngx_queue.h #include <ngx_config.h> #include <ngx_core.h> #ifndef _NGX_QUEUE_H_INCL ...