跨域的iframe高度自适应
更新日期:
跨域的iframe高度自适应
非常不情愿的要写iframe,没办法工作需要，又赶上跨域的问题，还要自适应高度，找了很多文章，终于解决了，也从中知道了很多知识还是很有收获的，雨后看见彩虹了，哈哈哈
什么是跨域
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：
首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.com域名下的对象。更详细的说明可以看下表：
我遇到的问题
页面A=www.a.com 页面B=www.b.com
- 在页面A下加载iframe（页面B）,iframe高度可变
- 页面A需要知道页面B的高度，但是由于不在同一个域名下，无法获得其高度
解决办法一
- 通多第三个与页面A相同域名的页面C实现高度的传递
参考图片
解决办法二
- 通过HTML5里otherWindow.postMessage(message, targetOrigin, [transfer]);这个方法
A页面引入B页面,每隔6s向iframe获取一下高度
//捕获iframe
var domain = 'http://localhost:8080';
var iframe = document.getElementById('myIFrame').contentWindow;
//发送消息
setInterval(function(){
var message = 'Hello!';
iframe.postMessage(message,domain);
},6000);
B页面通过js计算页面高度，同时监听A页面发来的消息“Hello”,并把自身的高度发给A页面
var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
var height = Math.max(cHeight, sHeight);
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin == 'http://localhost:4040') {
//console.log(event.data);
//console.log(event.source);//发送源的window值
event.source.postMessage(height,event.origin)
}
}, false);
A页面要添加监听，收取B页面发来的高度信息，并赋值给iframe，这样就实现了不同域名下加载高度可变的iframe的问题
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin == 'http://localhost:8080') {
console.log(event.data);
var realHeight = event.data;
document.getElementById('myIFrame').style.height= realHeight+ "px";
}
}, false);
PS：我尝试此方法不兼容ie7,8，希望各路神仙指点迷津~
参考博客：