参考园友的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. 关于w3school的html5部分output 元素实例代码（点亲自试一试进去）的问题纠正

    修复: 将原来的 =  号修改成 <input type="button" onclick="resCalc()" value ="=" ...

  2. MVC之路随记2--Razor基础

    1.概述:Razor是mvc 3.0新扩展的内容,是默认的视图引擎,引擎一词可理解为Web Form中<% %>中的变形,但是Razor更加干净,轻量级,简单.使用了该引擎后,文件的后缀名 ...

  3. 简单理解Struts2中拦截器与过滤器的区别及执行顺序

    简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...

  4. 通过CSS实现小动物

    此例演示的是通过CSS实现动物头像,效果如下: 好了,上代码: html代码: <html> <head> <meta charset="utf-8" ...

  5. WKWebView

    按错了...,原帖地址http://blog.csdn.net/cyforce/article/details/37657009 webkit使用WKWebView来代替IOS的UIWebView和O ...

  6. Eclipse/JavaWeb （三）三大框架之Spring框架 持续更新中...

    (一)发展历史 现在我们有三个层了,可是每层之间的调用是怎样的呢?比如显示层的struts需要调用一个业务类,就需要new一个业务类出来,然后使用:业务层需要调用持久层的类,也需要new一个持久层类出 ...

  7. springMvc 报错

    org.springframework.core.convert.ConversionFailedException: Failed to convert from type java.util.Ar ...

  8. HDU 5869 (离线+树状数组)

    Problem Different GCD Subarray Query 题目大意 给定n个数的序列,有q个询问,每次询问一个区间中所有子区间所形成不同的gcd的数量. 解题分析 由于固定一个数为右端 ...

  9. 【转】最佳Restful API 实践

    原文转自:https://bourgeois.me/rest/ REST APIs are a very common topic nowaday; they are part of almost e ...

  10. 图片上传安全性问题，根据ContentType (MIME) 判断其实不准确、不安全

    图片上传常用的类型判断方法有这么几种---截取扩展名.获取文件ContentType (MIME) .读取byte来判断(这个什么叫法来着?).前两种都有安全问题.容易被上传不安全的文件,如木马什么的 ...