参考园友的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/