参考园友的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. Meta标签中的viewport属性及含义

    一.什么是Viewport 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个 ...

  2. spring mvc 跳转后页面cs样式表丢失

    原因:../不能正确返回 解决办法:jsp文件加<% String path = request.getContextPath(); String basePath = request.getS ...

  3. nodejs入门 SSH服务器远程部署nodejs

    最近刚刚接了一个项目我也是个nodejs的初级的人 从开始吧 建立服务器  用什么ssh工具我就不说了 这个界面大家都熟悉吧 点击下面的 All download options wget http: ...

  4. vs2010无可用源

    全选CPP文件内容,选择 “编辑”-“高级”-“设置选定内容的格式”,保存,重新编译. 当然这种方法是不能完全解决这个问题的奥,你需要在菜单栏的生成里面找到重新生成解决方案,重新生成解决方案试一下啦, ...

  5. mysql多种备份方式比较及实现

    Mysql备份 MySQL的备份和还原: 备份:存放为副本-->数据备份 RAID1,RAID10:保证硬件损坏而不会业务中止,不能保证逻辑上的损害 例如:DROP TABLE mydb.tb1 ...

  6. Jenkins - 持续集成环境搭建

    1. Jenkins 概述 Jenkins是一个开源的持续集成工具.持续集成主要功能是进行自动化的构建.自动化构建包括自动编译.发布和测试,从而尽快地发现集成错误,让团队能够更快的开发内聚的软件. 2 ...

  7. layabox 引擎

    layabox H5引擎性能之王LayaAir http://ldc.layabox.com/

  8. rtpMIDI Tutorial

    Tobias Erichsen private stuff & software for audio, midi and more Search Main menu Skip to prima ...

  9. iOS 线性滚动

    在这里,给大家带来简单的滚动实现,首先看一下实现效果. 通过观察不难发现,有很多地方并不是那么容易想出来的,对于篇随笔,感兴趣可以查查相关资料,我就不尽行过多说明,(主要是开考文字,不好说明

  10. Angular--$http服务

    关于Angular中$http 服务是对XMLHttpRequest 对象的封装,向服务器发送请求: 下面自己在angular中$http学习的一个记录, GET请求(先贴码) angualr代码: ...