参考园友的js跨越实现，有提到三种方式：

1. 中间页代理方式,利用iframe的location.hash

参见：http://www.5icool.org/a/201203/a1129.html

2.window.postMessage实现方式

参见：http://blog.csdn.net/u012545279/article/details/16802489

3.window.name实现方式

结合我们自身项目及前人经验改良了window.name实现跨域，并在IE8、Chrome和Firefox下测试通过。

有三个页面：

  • a.com/main.html：主页面。
  • a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
  • b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。(本例中我们是获取子页面child的高度以进行高度自适应的调整).

1.main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

    <title>Inter Domain Data Test</title>

    <script type="text/javascript">  

    function domainData(url, fn){

        var state = 0,

        iframe = document.createElement('iframe'),

        loadfn = function() {

            if (state === 1) {

                fn(iframe.contentWindow.name);

                iframe.contentWindow.document.write('');

                iframe.contentWindow.close();

                document.body.removeChild(iframe);

                iframe.src = '';

                iframe = null;

            } else if (state === 0) {

                state = 1;

                iframe.contentWindow.location = "http://a.com/proxy.html";    // 设置的代理文件

            }

        };

        iframe.src = 'http://localhost/smsGateway/route/tochild.do';

        if (iframe.attachEvent) {

            iframe.attachEvent('onload', loadfn);

        } else {

            iframe.onload  = loadfn;

        }

        document.body.appendChild(iframe);

    }

    </script>

</head>

<body>

  <iframe id="iframeChild" name="iframeChild" src="http://b.com/child.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>

</body>

    <script type="text/javascript">

    domainData('http://b.com/child.html', function(data){

        var iObj = document.getElementById('iframeChild');

        iObj.style.height = data+"px";

        //alert("height: "+data);

    });

    </script>

</html>

2.child.html

<!DOCTYPE html>

<html>

<head>

    <meta  http-equiv='Content-Type'  content='text/html;charset=UTF-8' />

    <title>iframe child</title>

</head>

<body>

<h3>This is child page.</h3>

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

    <table border="1" width="600" style="height: 800px; background-color: yellow">

        <tr>

            <td><h3>iframe for auto height testing</h3></td>

        </tr>

    </table>

    <table border="1" width="200" style="height: 400px; background-color: blue">

        <tr>

            <td><h3>iframe for auto height testing</h3></td>

        </tr>

    </table>

</body>

    <script type="text/javascript">

        window.name = document.documentElement.scrollHeight; //get iframe height

    </script>

</html>

参考并部分摘抄自：

http://www.cnblogs.com/zjfree/archive/2011/02/24/1963591.html

http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html

window.name跨域通信原理及实例 参见：http://www.planabc.net/2008/09/01/window_name_transport/

JS跨域解决iframe高度自适应（IE8/Firefox/Chrome适用）的更多相关文章

  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高度自适应问题

    1.前言 解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求: ...

  3. js跨域解决方式

    什么是跨域? 概念:仅仅要协议.域名.port有不论什么一个不同,都被当作是不同的域.(所谓同源是指,域名.协议,port同样.),对于port和协议的不同,仅仅能通过后台来解决. URL 说明 是否 ...

  4. jQuery解决iframe高度自适应代码

    网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...

  5. 利用servlet做转发，实现js跨域解决同源问题

    做前端开发,避免不了跨域这个问题,跨域具体什么概念,不赘述,博客里太多.简单说下,我们用js发请求,不管post还是get,如果发请求的对象和当前web页面不在同一域名下,浏览器的同源策略会限制发请求 ...

  6. JS跨域解决方式 window.name

    window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等 ...

  7. [转]JS跨域解决方式 window.name

    本文转自:http://www.cnblogs.com/lichuntian/p/4909465.html window.name 传输技术,原本是 Thomas Frank 用于解决 cookie ...

  8. 黄聪：Access-Control-Allow-Origin，JS跨域解决办法

    .htaccess添加下面代码: <IfModule mod_headers.c> Header add Access-Control-Allow-Origin "*" ...

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

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

随机推荐

  1. UIkit框架之uiUIapplication

    1.继承链:uiresponder:NSObject 2.使用 sharedApplication方法来存取对象 3.这个类可以遵守协议是UIApplicationDelegate 4.获取app的实 ...

  2. PKU 1006

    数学问题吧,有兴趣的可以研究一下“中国剩余定理” // 1006.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include < ...

  3. PHP时区配置

    在PHP安装目录中找到 php.ini-development 复制创建新的副本 找到 :date.timezone = 修改为 date.timezone = PRC 并保存为php.ini PRC ...

  4. 【LeetCode】Gray Code

    Gray Code The gray code is a binary numeral system where two successive values differ in only one bi ...

  5. CSS的重要性

    自己很喜欢查看设计出彩的网页,在CSS Zen Garden选择了一个颜色搭配亮眼.结构错落的网页,照着原页面自己写了一个出来.之前做页面的时候总是会把原页面和自己做的放到PS里一个像素一个像素对比查 ...

  6. 探究toString()和valueOf()

    1.用法如下:toString()方法:返回对象的字符串表示. 对象 操作 Array 将 Array 的元素转换为字符串.结果字符串由逗号分隔,且连接起来. Boolean 如果 Boolean 值 ...

  7. POJ 2976

    http://poj.org/problem?id=2976 01分数规划问题,可以舍掉k组 01分数规划用于解决的经典问题是最优比率生成树 解法见http://www.cnblogs.com/lot ...

  8. 最全的运营推广方案，教你如何从零开始运营APP

    转载自:最全的运营推广方案,教你如何从零开始运营APP(http://www.kusocial.com/9319 ) 最全的运营推广方案,教你如何从零开始运营APP 2014-10-07 • 运营 • ...

  9. 《一个 Go 程序系统线程暴涨的问题》结论

    原文地址:https://zhuanlan.zhihu.com/p/22474724 作者的结论没写好,我来说两句.. 结论: Docker swarm自己有个函数,叫setTcpUserTimeou ...

  10. 【JS】falsy与truthy

    1.Falsy值,当进行逻辑判断时均为false(如!!false==false).六个Falsy值:false.undefined.null.正负0.NaN."". 2.其余所有 ...