JS跨域解决iframe高度自适应(IE8/Firefox/Chrome适用)

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

上一篇:C#设计模式之建造者模式


下一篇:居然上了模板使用排行榜第一 happy一下