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>

Iframe跨域嵌入页面自动调整高度的办法的更多相关文章

  1. Iframe跨域JavaScript自动适应高度

    重点分析: 主域名页面:页面A,页面C 其它域名页面:页面B 步骤: 1.页面A(主域名)通过Iframe(id="iframeB")嵌套页面B(其它域名) 2.页面B(其它域名) ...

  2. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  3. IFrame跨域访问自定义高度

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...

  4. IFrame跨域访问&&IFrame跨域访问自定义高度

    1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...

  5. IE下IFrame引用跨域站点页面时，Session失效问题解决

    问题场景:在一个应用(集团门户)的某个page中, 通过IFrame的方式嵌入另一个应用(集团实时监管系统)的某个页面. 当两个应用的domain 不一样时, 在被嵌入的页面中Session失效.(s ...

  6. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

  7. iframe跨域cookie问题

    今天在项目里面遇到了iframe跨域不能写cookie的问题.应用场景是这样的:有A和B两个业务,A要通过iframe的方式嵌入B,但是在ie下A不能通过写cookie的方式记录信息,在firefox ...

  8. js iframe跨域访问

    1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...

  9. iframe跨域通信实战

    "长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...

随机推荐

  1. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

  2. Java的同步容器和并发容器

    前言: 之前在介绍Java集合的时候说到,java提供的实现类很少是线程安全的.只有几个比较古老的类,比如Vector.Hashtable等是线程安全的,尤其是Hashtable,古老到连命名规范都没 ...

  3. mysql 5.7 Access denied for user 'root'@'localhost' solution

    sudo vim /etc/mysql/debian.cnf # Automatically generated for Debian scripts. DO NOT TOUCH! [client] ...

  4. express框架 中间件

  5. 批处理之SET命令

    除了 下面分别介绍: 表示第二个字符到倒数第三个字符的值

  6. Win10上部署Apollo配置中心

    基于Docker在Win10上部署Apollo配置中心 https://www.jianshu.com/p/a1215056ce75 http://nobodyiam.com/2016/07/09/i ...

  7. jloi2017（shoi2017?）六省联考酱油记

    Day -n 听说了4.22.4.23的省选,而且还是六省联考. 压力山大. 尽管我只是一名高一的simple OIer,在省选到来之前,心里还是很紧张的. 毕竟自己也知道南方dalao们都是神犇,像 ...

  8. Mybatis缓存机制及mybatis的各个组成部分

    Mybatis 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Session,当 Session flush 或 close 之后,该Session中的所有 ...

  9. JS让任意图片垂直水平居中且页面不滚动

    说一下以前遇到的一个问题: 假设有一张小图,要实现点击查看大图的功能,而这个图的宽高可能会超过浏览器的宽高,这时候我们通过JS来改变图片的宽高,从而实现图片在浏览器居中显示且不滚屏. 方法如下: 首先 ...

  10. Educational Codeforces Round 11 A

    A. Co-prime Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...