重点分析：

主域名页面：页面A，页面C

其它域名页面：页面B

步骤：

1、页面A（主域名）通过Iframe(id="iframeB")嵌套页面B（其它域名）

2、页面B（其它域名）获取自身高度值pageB_height，再通过Iframe(id="iframeA")嵌套页面C同时传自身高度值pageB_height给页面C

3、因为页面C和页面A同域名，所以可以在页面C中获取页面A的Iframe(id="iframeB")，并将页面A中的iframeB的高度值设为pageB_height

中间页面C(主域名)：http://www.main.com/setheight.aspx

<html><head><title>JavaScript使跨域Iframe自动适应高度中间页面</title>

<script type="text/javascript">

    function pseth() {

        var iObj = window.parent.parent.document.getElementById('iframeB'); //A和main同域，所以可以访问节点

        var iObjH = "";

        try {

            iObjH = window.parent.parent.frames["iframeB"].frames["iframeA"].location.hash; //访问自己的location对象获取hash值

        } catch (e) {

            iObjH = window.location.toString();

        }

        var arr = iObjH.split("#")[1];

        var arrPasearr = arr.split("|");

        // alert(arrPasearr[0]);

        iObj.style.height = arrPasearr[0] + "px"; //操作dom

        if (arrPasearr[1] != undefined && arrPasearr[1] != "")

            window.parent.parent.document.title = decodeURI(arrPasearr[1]) + '－吉运商城';

    }

    try {

        pseth();

    } catch (e) {

    }

</script>

</head><body></body></html>

　//code by:博客园-曹永思　

主页面A(主域名)：http://www.main.com/index.aspx

<html><head><title>主页面</title>

</head><body>

<iframe id="iframeB" src="http://b.main.com/index.html" scrolling="no" width="100%" height="1000px" frameborder="0" marginwidth="0" marginheight="0"></iframe>

</body></html>

　　

嵌套的页面B(其它域名)： http://b.main.com/index.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>嵌套在Iframe里的页面</title>

</head>

<body bgcolor="#f1e7de">

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>

</body>

<script type="text/javascript">

    function sethash() {

        var hashH = document.documentElement.scrollHeight; //获取自身高度

        var urlC = "http://www.main.com/setheight.aspx"; //设置iframeA的src

        document.getElementById("iframeA").src = urlC + "#" + hashH + "|"; //将高度作为参数传递

    }

    window.onload = sethash;

</script>

</html>

　　

Iframe跨域JavaScript自动适应高度的更多相关文章

  1. Iframe跨域嵌入页面自动调整高度的办法

    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 ...

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

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

  3. javascript跨域、iframe跨域访问

    1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...

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

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

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

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

  6. 关于iFrame特性总计和iFrame跨域解决办法

    1.iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1. ...

  7. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  8. js iframe跨域访问

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

  9. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

随机推荐

  1. linux命令学习之：mv

    mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 命令格式    mv [选项] 源文件或目 ...

  2. JSP使用sessionScope获取session值

    场景:有些实体对象可以放到HttpSession对象中,保正在一个会话期间可以随时获取这个对象的属性,例如可以将登录用户的信息写入session,以保证页面随时可以获取并显示这个用户的状态信息.下面以 ...

  3. idea工程中web.xml报错Servlet should have a mapping

    搭建ssm工程过程中web.xml报错:Servlet should have a mapping ....但是mapping已经配置好了...如下图: 搜索无果,后来发现是工程的web.xml位置配 ...

  4. iOS 集成极光推送

    最近极光推送更新到V3版本之后,推送又不成功!配合服务器联调了半天,发现是服务器环境配置有问题. 想着就把极光推送的步骤给记录下来. 一.配置push证书 这个可以到极光文档里写,很详细 二.导入必要 ...

  5. node.js中对同步，异步，阻塞与非阻塞的理解

    我们都知道javascript是单线程的,node.js是一个基于Chrome V8 引擎的 javascript 运行时环境,注意 node.js 不是一门语言,别搞错了. javascript为什 ...

  6. jQuery封装和优化

    封装和优化插件 --封装插件 (function($){ //自定义插件代码 })(jQuery) --------------- (function($){ $.fn.extend({ //函数列表 ...

  7. Java中重写与重载的区别

    方法重载:关键字overload,方法名和方法的返回类型都相同,方法参数个数和类型不一样方法重写:也叫方法覆盖,关键字override,相对于类继承而言,重写的方法名,返回类型,参数个数,参数类型都要 ...

  8. laravel 门面的介绍和使用

    #上文讲述了laravel中怎么用容器依赖注入类的示例.其实在服务提供者上面在封装一层静态调用,这就是门面.静态调用门面,返回了容器中注册的别名和实例. #下面是测试的示例 #先创建要操作的类 < ...

  9. Thread中join()方法进行介绍

    http://www.cnblogs.com/skywang12345/p/3479275.html https://blog.csdn.net/dabing69221/article/details ...

  10. vim自动添加tags、cscope

    每次打开一个工程都需要重新添加tags.cscope,很不方便,网上找了一下. 将其添加到 ~/.vimrc 中之后,打开 vim 就会自动搜索当前路径下的tags.cscope添加进去. 自动添加 ...