参考园友的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. Linux中vim的简单配置

    本文主要分享Linux中vim的简单配置 ★配置文件的位置     在目录/etc.下面,有个名为vimrc的文件,这就是系统中公共的vim配置文件,对所有用户都开放.而在每个用户的主目录下,都可以自 ...

  2. CGBitmapContextCreate函数参数详解

    函数原型: CGContextRef CGBitmapContextCreate ( void *data, size_t width, size_t height, size_t bitsPerCo ...

  3. ASP.NET Repeater 控件分页

    protected void Page_Load(object sender, EventArgs e) { HttpContext context = HttpContext.Current; co ...

  4. 使用注解配置Spring框架自动代理通知

    话不多说上代码 项目架构图及Lib包如下: 第二步创建业务类接口 package cn.happy.day01.entity; /** * 1.业务接口 * @author Happy * */ pu ...

  5. 从零开始学习Node.js例子八 使用SQLite3和MongoDB

    setup.js:初始化数据库 var util = require('util'); var async = require('async'); //npm install async var no ...

  6. 开源免费天气预报接口API以及全国所有地区代码！！（国家气象局提供） 【转】

    国家气象局提供的天气预报接口 接口地址: http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data ...

  7. CSS元素定位6-10课

    <精通CSS.DIV网页样式与布局>视频6-10课总结图: 元素定位 (1)float:left/right; 左浮动:脱离普通文档流向左浮动(即向左对齐):float属性必须应用在块级元 ...

  8. mvc4 部署http错误403.14 forbidden

    1. 检查服务器上是否安装了“HTTP重定向”功能和“静态内容压缩”功能(在添加/删除程序或增加角色处安装).这是我所遇到的问题:2. 应用程序池要被配置为“集成”3. 把.net 4.0安装在iis ...

  9. CLR via C# 3rd - 06 - Type and Member Basics

    1. Different Kinds  of Type Members        A type can define zero or more of the following kinds of ...

  10. jquery trigger-bind示例

    $('#btnSearch').bind('click',function(){ .....}) 然后用trigger来激活事件:$('#btnSearch').trigger('click');