参考园友的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. docker 源码分析 三（基于1.8.2版本），NewDaemon启动

    本文来分析一下New Daemon的启动过程:在daemon/daemon.go文件中: func NewDaemon(config *Config, registryService *registr ...

  2. 2016 - 2 - 19 ARC内存管理知识总结（一，arc基本概念及alloc等方法的实现）

    一. ARC的基本概念 1. 在objc中采用automatic reference counting 机制, 让编译器来进行内存管理.在降低程序崩溃,内存管理泄漏等风险的同时,很大程度减少了程序员的 ...

  3. React学习——ListView（Reflux）

    接前一篇,把前面的ListView改成Reflux的形式 var BookActions=Reflux.createActions([ 'fetchList' ]); var BookStore = ...

  4. Android Soap实例

    // 指定命名空间 private static final String NAMESPACE = "http://WebXml.com.cn/"; // 给出接口地址 priva ...

  5. uboot(二）: Uboot-arm-start.s分析

    声明:该贴是通过参考其他人的帖子整理出来,从中我加深了对uboot的理解,我知道对其他人一定也是有很大的帮助,不敢私藏,如果里面的注释有什么错误请给我回复,我再加以修改.有些部分可能还没解释清楚,如果 ...

  6. xamarin.forms 版本自动更新(针对android）

    1.首先同过url地址下载文件,这里必须要启用单独一个下载线程 new Thread(run).Start(); 通过url下载的方法 public void run()        {       ...

  7. NOIP 考前 数据结构复习

    BZOJ 1455 左偏树即可 #include <cstdio> #define LL long long ; struct Info{LL l,r,v,Dis;}Tree[Maxn]; ...

  8. NOIP 赛前模拟记录

    8.11 T1 给定一个序列M,求出能过构造出的序列使得(Si+Si+1)/2=Mi成立的序列个数.保证M,S递增. T2 平面点集中最大的四边形面积 T3 不太懂得一道国家队选拔的加强版. 90+2 ...

  9. jquery jqPlot API 中文使用教程

    jqPlot是一个灰常强大的图表工具,曲线,柱状,饼图,应该有尽有,更要命的是,调用方便~~ 官网:http://www.jqplot.com/ 这里贡献上中文教程,基本上所有的api都很齐全,供有需 ...

  10. OpenGL阴影，Shadow Mapping（附源程序）

    实验平台:Win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): 本文描述图形学的两个最常用的阴影技术之一,Shadow Mapping方法(另一种是Sh ...